vue+ckeditor4整合，ckeditor4上传文件，遇到的问题记录及解决 |
您所在的位置：网站首页 › 晋城景点大全景点排名 › vue+ckeditor4整合，ckeditor4上传文件，遇到的问题记录及解决 |
vue+ckeditor4整合，ckeditor4上传文件，遇到的问题记录及解决
|
项目中要求更换富文本编辑器，原来用的是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的标签加入： window.CKEDITOR_BASEPATH = 'ckeditor/';添加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组件： 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 ], // 该插件使用元素（而不是传统的元素）作为主题编辑器中的可编辑区域 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(); } };在使用的地方引入： import Ckeditor from "../../components/common/ckeditor";遇到的问题： Uncaught SyntaxError: Unexpected token ' |
【本文地址】