我下载的是 ckeditor5-build-decoupled-document
npm i ckeditor5-build-decoupled-document
在组件中去引入
import CKEditor from "@ckeditor/ckeditor5-build-decoupled-document";
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn.js'
组件的内容为
<div id="toolbar-container" style="width:80%"></div>
<div id="editor" style="height:300px;border:1px solid #ccc;width:80%" @blur="blurBtn" ref="inputContent" v-bind='value'>
</div>
method函数为
CKEditor.create(document.querySelector("#editor"), {
ckfinder: {
uploadUrl: "http://xxxxxxxxxx"
//后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
}
})
.then(editor => {
const toolbarContainer = document.querySelector("#toolbar-container");
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
this.editor = editor; //将编辑器保存起来,用来随时获取编辑器中的内容等,执行一些操作
this.editor.isReadOnly = this.onRead;(此处验证为是否可读)
})
.catch(error => {
console.error(error);
});
下面为在父组件总中去引入
<ckeditor :inputContent="form.content" @blurBtn="btn" :onRead ="onRead"></ckeditor>