vue+ckeditor4整合，ckeditor4上传文件，遇到的问题记录及解决
项目中要求更换富文本编辑器，原来用的是wangEditor，方便简洁，与vue结合较好，但是用户觉得功能太少，于是进行漫长的编辑器更换之路。百度的UEditor满足要求，但是与vue结合的案例几乎没有...
项目中要求更换富文本编辑器，原来用的是wangEditor，方便简洁，与vue结合较好，但是用户觉得功能太少，于是进行漫长的编辑器更换之路。百度的UEditor满足要求，但是与vue结合的尝试失败了，可能是没更新vue-ueditor-wrap，或者是UEditor改变了，网上的例子的版本有些老。于是换ckeditor，ckeditor5很简洁，官网与vue结合的文档也很全，但是功能不多，就换ckeditor4，这个功能非常全：如图
官网地址：https://ckeditor.com/docs/ckeditor4/latest/examples/fullpreset.html
下面说与vue的结合，ckeditor5的话是有插件可以用的 @ckeditor/ckeditor5-vue，但是4没有，首先下载官网压缩包https://ckeditor.com/ckeditor-4/download/ ，有标准、全部等选择，我用的是full package，解压后放在static目录下，
vue-cli 3 项目要放在public下，然后先启动项目，尝试
http://localhost:8080/ckeditor/samples/index.html能否打开，打开了就没有问题。然后在index.html的<head>标签加入：
<script>
window.CKEDITOR_BASEPATH = '<%= BASE_URL %>ckeditor/';
</script>
<script type="text/javascript" src="<%= BASE_URL %>ckeditor/ckeditor.js"></script>添加window.CKEDITOR_BASEPATH可以解决 Uncaught TypeError: Cannot set property 'dir' of undefined 的问题，但是我后面没有再遇到这个问题，去掉indow.CKEDITOR_BASEPATH依旧可以运行。
在vue.config.js中添加：
module.exports = {
configureWebpack: smp.wrap({
externals: {
"CKEDITOR": "window.CKEDITOR"
}
})
}smp 是
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin({
outputFormat: 'human'
})SpeedMeasurePlugin 是一个快速编译的插件，我具体了解不多
然后增加ckeditor.vue组件：
<template>
<div>
<textarea :id="id"></textarea>
</div>
</template>
<script>
import tools from "../../config/tools"
import CKEDITOR from "CKEDITOR"
export default {
name: "ckeditor",
mixins: [tools],
props: {
value: {
type: String,
default: ''
},
readOnly: {
type: Boolean,
default: false
},
},
mounted() {
const self = this;
// 渲染编辑器，配置上传图片的路径
// self.ckeditor = window.CKEDITOR.replace(self.id);
setTimeout(function(){
// 渲染编辑器
self.ckeditor = CKEDITOR.replace(self.id, self.editorConfig);
// 设置初始内容
self.ckeditor.setData(self.value);
// 监听内容变更事件
self.ckeditor.on("change", function() {
self.$emit("input", self.ckeditor.getData());
});
},100)
/*console.log(CKEDITOR)
CKEDITOR.replace("editor", {height: "300px", width: "100%", toolbar: "Full"});
this.editor = CKEDITOR.instances.editor;
console.log(this.editor.getData());*/
},
data() {
return {
id: parseInt(Math.random() * 10000).toString(),
ckeditor: null,
editorConfig: {
removePlugins: ['about'],
removeDialogTabs: 'image:advanced;image:Link',//隐藏超链接与高级选项
image_previewText: ' ', //预览区域显示内容
//extraPlugins: 'button,panelbutton,colorbutton',//增加字体和背景颜色
//extraPlugins: [ MyCustomUploadAdapterPlugin ],
// 该插件使用<div>元素（而不是传统的<iframe>元素）作为主题编辑器中的可编辑区域
extraPlugins: 'divarea',
filebrowserUploadUrl: this.config().baseURL + 'v1/attachment/ckupload', //上传图片路径
// 是否强制复制来的内容去除格式 plugins/pastetext/plugin.js
forcePasteAsPlainText: false, //不去除
// 去除内容过滤
allowedContent: true,
// 折叠工具栏
toolbarCanCollapse: true,
// 只读模式
readOnly: this.readOnly,
/*toolbarGroups: [
{name: 'clipboard', groups: ['clipboard', 'undo']},
{name: 'editing', groups: ['find', 'selection', 'spellchecker']},
{name: 'links'},
{name: 'insert'},
{name: 'forms'},
{name: 'tools'},
{name: 'document', groups: ['mode', 'document', 'doctools']},
{name: 'others'},
'/',
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
{name: 'styles'},
{name: 'colors'},
{name: 'about'}
]*/
}
};
},
watch: {
// 监听prop的变化，更新ckeditor中的值
value() {
if (this.value !== this.ckeditor.getData()) {
this.ckeditor.setData(this.value);
}
}
},
// 销毁组件前，销毁编辑器
beforeDestroy() {
this.ckeditor.destroy();
}
};
</script>
<style scoped>
</style>在使用的地方引入：
<ckeditor v-model="editForm.content"></ckeditor>import Ckeditor from "../../components/common/ckeditor";遇到的问题：
Uncaught SyntaxError: Unexpected token '<'
Uncaught TypeError: Cannot read property 'replace' of undefined
解决方法：
<script type="text/javascript" src="ckeditor/ckeditor.js"></script> 改为
<script type="text/javascript" src="<%= BASE_URL %>ckeditor/ckeditor.js"></script>
Uncaught TypeError: Cannot read property 'setData' of undefined
Uncaught TypeError: Cannot read property 'getClientRect' of null
Uncaught TypeError: Cannot read property 'getComputedStyle' of undefined
TypeError: Cannot read property 'getSelection' of undefined
解决办法：
用divarea插件，该插件使用<div>元素（而不是传统的<iframe>元素）作为主题编辑器中的可编辑区域。地址：https://ckeditor.com/cke4/addon/divarea，editorConfig添加：extraPlugins: 'divarea'
上传文件
长传文件需要单独写上传方法，官网链接：https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html
我的方法参考：
@PostMapping("ckupload")
public void upload(@RequestParam("upload") MultipartFile file, HttpServletResponse response) {
DataMap data = new DataMap();
try {
PrintWriter out = response.getWriter();
UploadInfo info = attachmentService.upload("cms-content-page", null, file);
if (info != null) {
data.put("uploaded", 1);
data.put("message", "上传成功");
data.put("id", info.getId());
data.put("fileName", info.getFilename());
data.put("url", uploadFilePath + "/cms-content-page/" + info.getFilename());
} else {
data.put("uploaded", 0);
data.put("error", "上传失败");
}
out.print(JSONObject.toJSON(data).toString());
} catch (Exception e) {
e.printStackTrace();
}
}它的参数是upload，返回的参数必须要有uploaded 1成功 0 失败，成功要有url，失败是error.message
我发现博客编辑的上传和ck的上传好像啊，^_^
参考博客：
vue项目集成富文本编辑器CKEditor4 https://www.cnblogs.com/qlongbg/p/12485971.html
ckeditor5,ckeditor4富文本编辑器在vue中的使用 https://www.cnblogs.com/yuwenjing0727/p/10772749.html
vue3结合ckEditor4富文本编辑器的使用 https://blog.csdn.net/qq_41149508/article/details/107605799
愿君少走坑。。
前往低代码交流专区
更多推荐
8
0- 0
已为社区贡献2条内容
所有评论(0)