在VUE中,关于CKEditor使用
Vue 关于 ckeditor 使用
2023-09-27 14:26:44 时间
官方文档
语言配置
代码如下
ClassicEditor .create( document.querySelector( '#editor' ), {
language: 'de' // 配置语言 , 还需要去引用语言文件 , 在`@ckeditor/ckeditor5-build-decoupled-document/build/translations`下加载对应的文件即可
} ) .then( editor=> {
console.log( editor );
} ) .catch( error=> {
console.error( error );
} );
然后可以在console中使用window.CKEDITOR_TRANSLATIONS
查看当前使用的语言 , 遵循ISO 639-1
图片Upload
下面讲解的是如果不需要单独使用图片上传服务器该如何把图片和文本一起上传到数据库
- 第一点 , 需要在实例化之后使用plugins下面的get方法拿到上传图片钩子,具体使用如下
editor.plugins.get('FileRepository' ).createUploadAdapter =function( loader ) {
setTimeout(() => {
var result = loader._reader._reader.result;
result !=='' ? vm.html_image.push(result) :null
}, 1000);
return new UploadAdapter(loader);
};
vm.html_image就是保存当前内容中图片base64
UploadAdapter文件就是防止报错,阻拦文件上传的方法,内容如下
class UploadAdapter {
constructor( loader ) {
// Save Loader instance to update upload progress.
this.loader = loader;
}
upload() {
return new Promise((resole, reject) => {
});
}
}
export default UploadAdapter;
最后在保存文件方法之后拿到文档内容html,使用indexOf将base64写入传给后台,具体代码如下
String.prototype.splice =function(start, newStr) {
return this.slice(0, start) + newStr +this.slice(start);
};
var data =this.editor.getData();
var current =0, index =0, temp = [data];
this.html_image.forEach((item, i) => {
current = index = data.indexOf('<img>', current) +4;
temp[i +1] = temp[i].splice(index, ` src="${this.html_image[i]}"`);
});
this.$emit('data', temp [temp.length -1]);
相关文章
- 安装vue项目依赖的时候,报Can't find Python executable "python", you can set the PYTHON env variable
- vue关于通过下标更改数组的理解
- 关于前后端同构,我的一点思路和心得(vue、nodejs、react、模版)
- Vue引用其他组件,但组件某些部分不需要时的简单处理
- vue组件弹出框点击显示隐藏
- 关于vue构建项目的一些指令
- 关于vue自定义事件中,传递参数的一点理解
- 关于vue事件监听的一个问题
- VUE使用中踩过的坑
- 【笔记】Vue Element+Node.js开发企业通用管理后台系统——电子书上传功能开发
- 关于vue混入(mixin)的解读
- 给大家整理了几个开源免费的 Spring Boot + Vue 学习资料
- vue中 关于$emit的用法 子控件与父控件(二)
- 关于移动端开发中遇到的坑-vue
- 关于一些Vue的文章。(5)
- Vue.js——60分钟browserify项目模板快速入门【7】
- vue——代码相同,但启动后样式错乱页面不同
- vue——视频播放插件vue-video-player的使用
- vue——预先指定高度,进行懒加载
- vue swiper点击后返回不能自动播放
- 前端学习之VUE基础五(Vuex):Vuex概述、Vuex的基本使用、Vuex的核心概念
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航