开门见山，富文本编辑器就是一个大坑。接下来记录一下Vue2如何集成CKEditor5,大家有更好的做法欢迎交流
一.安装环境
- vue 2.6.11
- vue/cli 3.6.0(使用源码集成手脚架必须要3.x及以上版本)
二.使用官网的集成方案快速安装（以Classic为例）
npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-classic
npm install --save @ckeditor/ckeditor5-adapter-ckfinder
-
引入项目
image
官网推荐是全局引入,但是个人还是更加推荐局部引入吧，毕竟富文本编辑器只是在一两个页面上使用 在components目录下创建一个ykeditor.vue
<template>
<div id="ykEditor">
<ckeditor id="ckeditor"
:editor="editor"
v-model="editorData"
:config="editorConfig"></ckeditor>
</div>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import CKEditor from '@ckeditor/ckeditor5-vue2'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
export default {
name: 'ClassicEditor',
components: {
//局部注册方式
ckeditor: CKEditor.component
},
props: {
content: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请输入内容'
}
},
data() {
return {
// Use the <ckeditor> component in this view.
editor: ClassicEditor,
editorData: this.content,
editorConfig: {
placeholder: this.placeholder,
language: 'zh-cn',
//该方式本人没有使用过,使用ckfinder上传时要注意返回的格式
//应该是{"uploaded":1,"url":"/"}
//或者{"uploaded":true,"url":"/"}
ckfinder: {
uploadUrl: '/'
}
},
}
},
methods: {
getContent(){
return this.editorData
},
setContent(val){
this.editorData = val
},
},
}
</script>
<style>
.ck-editor__editable {
min-height: 400px;
}
</style>
- 使用
<template>
<div id="app">
<yk-editor ref="editorRef"></yk-editor>
<button @click="setContent">设置内容</button>
<button @click="getContent">获取内容</button>
</div>
</template>
<script>
import ykEditor from "@/components/ykeditor";
export default {
name: 'ClassicEditor',
components: {
ykEditor
},
data() {
return {
}
},
methods: {
setContent(){
this.$refs.editorRef.setContent("<h1>这是ykEditor</h1>")
},
getContent(){
console.log(this.$refs.editorRef.getContent())
}
}
}
</script>
效果图
image
该有的功能基本都有了
三.自定义安装（相对）
这里的自定义只是控制classic的集成方案中的有的功能
打印了一下大概有CKFinderUploadAdapter，Autoformat，Bold，Italic，BlockQuote，CKFinder，EasyImage，Heading，Image，ImageCaption，ImageStyle，ImageToolbar，ImageUpload，Indent，Link，List，MediaEmbed，Paragraph，PasteFromOffice，Table，TableToolbarTextTransformation这一些
- 添加一个static目录,新建uploadImageAdapter.js
export default class uploadImageAdapter {
constructor(loader) {
this.loader = loader
}
async upload() {
//获取到用户上传的文件
const image = await this.loader.file;
const formData = new FormData();
formData.append('file', image)
/***
* axios实现上传逻辑
*
*/
//返回的结果格式化一下,把url传到下面的json中
let resultJson = {"uploaded":1,"url":"/"}
return resultJson
}
abort() {
}
}
- 创建一个自定义（相对）的classicEditor
<template>
<div>
<!-- 工具栏容器 -->
<div id="toolbar-container"></div>
<!-- 编辑器容器 -->
<div id="ykEditor"></div>
</div>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
import uploadImageAdapter from "@/static/uploadImageAdapter";
export default {
name: 'ClassicEditor',
props: {
content: {
type: String,
default: ''
}
},
data() {
return {
editor: null,
}
},
mounted() {
this.initEditor()
},
methods: {
initEditor() {
ClassicEditor.create(document.querySelector('#ykEditor'), {
language: 'zh-cn',
toolbar: [
'heading',
'|',
'bold',
'italic',
'Link',
'bulletedList',
'numberedList',
'|',
'imageUpload',
'blockQuote',
'|',
'undo', //撤销
'redo',//重做
],
}).then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
//正式初始化编辑器
this.editor = editor
//使用图片上传适配器
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
return new uploadImageAdapter(loader)
};
//监听数据变化
editor.model.document.on('change:data', () => {
this.content = editor.getData();
});
}).catch(e => {
console.log(e)
});
},
getContent() {
return this.content
},
setContent(val) {
this.editor.setData(val)
},
}
}
</script>
<style>
.ck-editor__editable {
min-height: 400px;
}
</style>
其中toolbar那里可以选择classic集成方案中的功能，也就是第三点开头的那些，只不过如果是这种安装方法,它会有引用这么一个东西，但是实际未必会有，所以添加之后看控制台的信息，如果提示没有的话，再逐一安装
还有一个比较坑爹的问题，如果是使用这样的集成方案，哪怕自定义也是只能定义集成方案中已有的功能，如果是继承方案中没有的功能，比如ImageReset这些...好像是没有办法再添加。
