vue+ckeditor4整合，ckeditor4上传文件，遇到的问题记录及解决

最新推荐文章于 2024-06-26 11:28:19 发布

dingchaochao_9110

最新推荐文章于 2024-06-26 11:28:19 发布

阅读量3.4k

点赞数 3

分类专栏： vue ckeditor 前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/dingchaochao_9110/article/details/108452583

版权

vue 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

ckeditor

1 篇文章 0 订阅

订阅专栏

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

愿君少走坑。。

dingchaochao_9110

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
vue+ckeditor4整合，ckeditor4上传文件，遇到的问题记录及解决

项目中要求更换富文本编辑器，原来用的是wangEditor，方便简洁，与vue结合较好，但是用户觉得功能太少，于是进行漫长的编辑器更换之路。百度的UEditor满足要求，但是与vue结合的案例几乎没有...
复制链接

扫一扫

专栏目录