为什么选这个编辑器，因为颜值！
官网 https://ckeditor.com/ckeditor-5/
image.png
image.png
1、安装
官网已经四种版本，也给出了下载安装的方法，参考官网安装
https://ckeditor.com/ckeditor-5/download/
2、引用
在组件中引用
import CKEditor from '@ckeditor/ckeditor5-build-classic'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn' //中文包
3、html
<div class="goods-editor">
<!-- 工具栏容器 -->
<div id="toolbar-container"></div>
<!-- 编辑器容器 -->
<div id="editor">
<!-- <p>This is the initial editor content.</p> -->
</div>
</div>
4、方法
因为图片要上传到我们的服务器，要重置一下上传路径，方法如下
export default {
data() {
return {
editor: null, // 编辑器实例
}
},
mounted() {
this.initCKEditor()
},
methods: {
initCKEditor() {
class UploadAdapter {
constructor(loader) {
this.loader = loader
}
upload() { //重置上传路径
return new Promise((resolve, reject) => {
var fileName = 'goods' + this.loader.file.lastModified
client().put(fileName, this.loader.file).then(result => {
resolve({
default: result.url
})
}).catch(err => {
console.log(err)
})
})
}
abort() {
}
}
//初始化编辑器
CKEditor.create(document.querySelector('#editor'), {
removePlugins: ['MediaEmbed'], //除去视频按钮
language: 'zh-cn', // 中文
ckfinder: {
'uploaded': 1, 'url': '/'
// 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
}
}).then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container')
toolbarContainer.appendChild(editor.ui.view.toolbar.element)
// 加载了适配器
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
return new UploadAdapter(loader)
}
this.editor = editor // 将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
}).catch(error => {
console.error(error)
})
},
}
4、获得编辑器中的数据
this.editor.getData()
5、初始化编辑器中的数据
this.editor.setData(contentVal)
6、编辑器只读
this.editor.isReadOnly = true; //将编辑器设为只读
网友补充，如果在上传之前需要做限制，参考如下：（感谢网友的分享）
class MyUploadAdapter {
constructor(loader) {
self.loader = loader;
self.oldValue = self.editor.getData();//保存原来的内容
}
upload() {
return new Promise((resolve, reject) => {
let size = self.loader.file.size;
if (size / 1024 > 2048) {
self.$message({
message: '图片不能大于2M'
});
self.editor.setData(self.oldValue);
return false;
}
const data = new FormData();
data.append('imageFile', self.loader.file);
self.fullscreenLoading = true;
self.$http.post('/editor/uploadImg', data).then(res => {
self.fullscreenLoading = false;
if (res) {
if (res.data.code == 200) {
resolve({
default: res.data.data
});
} else {
self.$message({
message: res.data.msg
});
self.editor.setData(self.oldValue);
}
} else {
self.$message({
message: 'can not upload file: ' + self.loader.file.name
});
self.editor.setData(self.oldValue);
}
})
}).catch(error => {
console.log(error);
});
}
abort() {
}
}
