项目中要求更换富文本编辑器,原来用的是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

愿君少走坑。。

Logo

前往低代码交流专区

更多推荐