在开发网站项目的时候,要用到一个富文本编辑器,都说Tinymce编辑器好用,但是安装了几次,不是语言包的错误,就是皮肤的错误,好不容易解决了,有显示不出来,还布局出问题,折腾了一天多,就果断放弃,使用ckeditor富文本编辑器,十分钟就搞定,没有太多的坑,推荐使用。
具体使用方法:
官网:https://ckeditor.com/ckeditor-5/
1、安装:有四种版本,选择 document
参考: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 id="toolbar-container"></div>
<!-- 编辑器容器 -->
<div id="editor">
<p>This is the initial editor content.</p>
</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)
})
},
}
5、获取编辑器的内容
this.editor.getData()
6、进行初始化
this.editor.setData(contentVal)
完整代码:
<template>
<div class="box">
<!-- 编辑器 -->
<div class="ckeditor">
<!-- 工具栏容器 -->
<div id="toolbar-container"></div>
<!-- 编辑器容器 -->
<div id="editor">
<p>This is the initial editor content.</p>
</div>
</div>
<button @click="getHtml">获取内容</button>
</div>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'
export default {
data() {
return {
editor:null,//编辑器实例
}
},
mounted() {
this.initCKEditor()
},
methods: {
initCKEditor(){
CKEditor.create(document.querySelector("#editor"),{
language: 'zh-cn',
ckfinder:{
// 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
uploadUrl:'',
}
}).then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
// 将编辑器保存起来,用来随时获取编辑器中的内容等,执行一些操作
this.editor = editor;
}).catch(error => {});
},
/*获取编辑器内容*/
getHtml(){
console.log(this.editor.getData());
},
}
}
</script>
<style>
.ckeditor{width: 80%; margin: 30px auto 0px; border:1px solid #ddd;}
</style>
参考:https://blog.csdn.net/wangxiuyan0228/article/details/83378416