一、安装
第一步肯定是先安装ckeditor了
一共有4种类型的rich editor,选择其中一种进行安装。由于是应用在vue中所以需要额外安装@ckeditor/ckeditor5-vue
执行如下命令
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-decoupled-document
二、在mian.js中全局注册
import CKEditor from '@ckeditor/ckeditor5-vue'
Vue.use(CKEditor)
三、在组件中使用
html代码
editor为指定4种rich editor种的一种
onEditorReady为编辑器ready时执行的方法
content为绑定的编辑器里面的内容
editorConfig为编辑器的一些配置
js代码
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn.js'
export default {
name: 'ArticlePublish',
data () {
return {
editor: DecoupledEditor,
content: '
请在此输入内容!!!
',editorConfig: {
toolbar: [
'heading',
'|',
'bold',
'italic',
'Underline',
'fontSize',
'numberedList',
'bulletedList',
'blockQuote',
'|',
'alignment:left',
'alignment:right',
'alignment:center',
'alignment:justify',
'|',
'imageUpload',
'Link',
'|',
'undo',
'redo'
],
language: 'zh-cn',
// 此处用的是simpleUpload的上传方式 这种上传方式需要后台的配合(返回指定的数据格式)类似这种
// {
// url: ''
// }
// 服务端需要接收的字段为upload
// 用这种方式上传rich editor中的 innerHTML 的 img 标签的 src 为服务器返回的链接而不是base64
simpleUpload: {
uploadUrl: '' // 你的上传图片地址
}
}
}
}
methods: {
onEditorReady (editor) {
// 打印所有的配置项
// console.log(Array.from(editor.ui.componentFactory.names()))
// Insert the toolbar before the editable area.
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
)
}
}
}
使用simpleUpload上传方式,文档会让你安装这么一个包@ckeditor/ckeditor5-upload,那么我们 一般就会这么来写
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter'
但是事情并没有那么简单,由于我们之前安装的ckeditor为build版本的,所以一旦你引用了这个包,好了,那么错误就跟着来了,这里官方也解释了错误的原因,所以我们要换一种方式引入。
克隆仓库到本地,安装相关的依赖项
在src目录下的ckeditor.js中添加如下代码
image.png
image.png
执行npm run build打包构建,替换掉之前node_modules中@ckeditor文件夹中对应的build目录,如下图
image.png
然后上面的配置项中,simpleUpload上传项就生效了
base64方式上传
可以看到上面截图的红框部分中有一个Base64UploadAdapter的上传适配器被我注释掉了,它和SimpleUploadAdapter写在一起,所以base64方式图片上传和simpleUpload是类似的,只是引入之后,无需任何配置,自动生效。
base64上传方式文档链接
自定义图片上传方式
首先要定义一个上传适配器
class MyUploadAdapter {
constructor(loader) {
// Save Loader instance to update upload progress.
this.loader = loader
}
async upload() {
const data = new FormData()
data.append('typeOption', 'upload_image')
data.append('upload', await this.loader.file)
return new Promise((resolve, reject) => {
axios({
url: `api/xxxx/ckeditor/upload`,
method: 'post',
data,
headers: {
'Authorization': 'Bearer tokenxxxxxxxxxxxxxxxxxxx' // 此处为你定义的token 值(Bearer token 接口认证方式)
},
withCredentials: true // true 为不允许带 token, false 为允许,可能会遇到跨域报错:Error: Network Error 弹窗提示
}).then(res => {
var resData = res.data
resData.default = resData.url
resolve(resData)
}).catch(error => {
reject(error)
})
})
}
abort () {
}
}
使用适配器 在onEditorReady方法中添加如下代码
editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
return new MyUploadAdapter( loader );
};
最后需要注意的就是如果你使用的是build版本的包,然后又引用了一些ckeditor的其它插件包,可能就会导致webpack编译报错。这里所采用的解决方案就是上面所说的去找对应编辑器源码仓库的方式,将插件集成到build包中,确保依赖只引用一次。