如果大家有问题可以在下方评论我会尽快解答
最近在公司后台管理项目中遇到了富文本框的使用,也是找了半天才找到一个稍微合适点的,在这里推荐给大家
CKEditor
地址:https://ckeditor.com/
在这里的使用方法也很简单
第一步:到官网把Ck的包下载下来,也可以使用npm直接下载,推荐使用ck4
下载地址:https://ckeditor.com/ckeditor-4/download/
第二步:将下载好的包解压自定义的文件夹
第三步:将解压好的自定义文件夹放到vue-cli搭好的public中
第四步:
这里需要在index.html引入ck的js代码
第五步:创建ck 公用模板 我这里起名字ck.vue
<template>
<div>
<textarea :id="id"></textarea>
</div>
</template>
<script>
export default {
name: 'ckeditor4',
props: [
'value'
],
mounted: function() {
const self = this
// 渲染编辑器
self.ckeditor = window.CKEDITOR.replace(self.id)
// 设置初始内容
self.ckeditor.setData(self.value)
// 监听内容变更事件
self.ckeditor.on('change', function() {
self.$emit('input', self.ckeditor.getData())
})
},
data: function() {
return {
id: parseInt(Math.random() * 10000).toString(),
ckeditor: null
}
},
watch: {
// 监听prop的变化,更新ckeditor中的值
value: function() {
if (this.value !== this.ckeditor.getData()) {
this.ckeditor.setData(this.value)
}
}
},
// 销毁组件前,销毁编辑器
beforeDestroy: function() {
self.ckeditor.destroy()
}
}
</script>
第六步:在需要使用ck富文本框的地方引入该模板,别忘了注册昂
第七步就是使用了
最后再讲一下图片功能:
首先找到这个文件
更改图片上传接口`在这里插入代码片
config.filebrowserImageUploadUrl =" ";
需要注意的是CKEditor图片上传需要后台返回特定的参数类型
// 成功的返回格式
{
"uploaded": 1,
"fileName": "foo(2).jpg",
"url": "/files/foo(2).jpg",
"error": {
"message": "A file with the same name already exists. The uploaded file was renamed to \"foo(2).jpg\"."
}
}
// 失败的返回格式
{
"uploaded": 0,
"error": {
"message": "The file is too big."
}
}
详情可看官网关于传图后success与error返回的格式要求说明文档 https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html