1 安装 npm install --save @ckeditor/ckeditor5-build-decoupled-document
2 引入 import CKEditor from ‘@ckeditor/ckeditor5-build-decoupled-document’
3 创建编辑器
HTML
<!-- 工具栏容器 -->
<div id="toolbar-container"></div>
<!-- 编辑器容器 -->
<div id="editor">
<p>This is the initial editor content.</p>
</div>在这里插入代码片
js部分
export default {
data() {
return {
editor:null,//编辑器实例
}
}
mounted() {
this.initCKEditor()
},
methods: {
initCKEditor() {
CKEditor.create(document.querySelector('#editor'), {
ckfinder: {
uploadUrl: '/admin/Upload/uploadUrl'
//后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
}
}).then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
this.editor = editor //将编辑器保存起来,用来随时获取编辑器中的内容等,执行一些操作
}).catch(error => {
console.error(error);
});
}
}
}
4 获取编辑器编辑内容 this.editor.getData()
5 初始化编辑器内容this.setData(‘dsd’)
6 这是ckeditor 的图片裁剪功能是不能使用的
为了使他有这个功能,我把源码拷贝下来。修改过程如下
(1)先把源码拷贝下来。https://github.com/ckeditor/ckeditor5-build-decoupled-document
(2)打开项目src下的ckeditor.js文件。一开始是没有这个插件的,是我npm install --save @ckeditor/ckeditor5-image/src/imageresize 之后再加上去的。
(3)、在项目中执行 npm run build 打包
打包完后,把build文件夹的东西,拷贝到自己项目中,去覆盖node_modules里面的文件
覆盖好后,跑自己的项目后,就有图片裁剪的功能了。