vue项目集成富文本编辑器CKEditor4

1. 官网下载CKEditor 4，将解压的ckeditor文件夹整体放在项目的public下
ckeditor官网

2.在Vue的index.html中引入CKEditor4

<script src="ckeditor/ckeditor.js"></script>

3.在components下新建ckeditor.vue文件，并在其中配置上出图片的路径

<template>
  <div>
    <textarea :id="id"></textarea>
  </div>
</template>
<script>
import httpConfig from '../config/http';
let {  kpaasApiHost } = httpConfig;
import sysConfig from '../config/system';

export default {
  name: "ckeditor4",
  props: ["value"],
  mounted: function() {
    const self = this;
  // 渲染编辑器，配置上传图片的路径 上传图片改为了自己的接口
　　// self.ckeditor = window.CKEDITOR.replace(self.id);
    self.ckeditor = window.CKEDITOR.replace(self.id,{filebrowserImageUploadUrl:  kpaasApiHost+'api/assets_service/v1/assets/upload_editer?secret_key='+sysConfig.secret_key+'&session_id='+localStorage.getItem("sessionId") });
    // 设置初始内容
    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() {
    this.ckeditor.destroy();
  }
};
</script>

4.注释掉ckeditor文件夹下config.js的上传图片路径

/**
 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.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' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;image:link;link:advanced';
    config.image_previewText = ' ';
    //上传图片窗口用到的接口
    // config.filebrowserImageUploadUrl =   "http://192.168.12.160:8090/gdt_information/messageFeedBack/uploadImgEdit";
    /*config.filebrowserUploadUrl = "http://192.168.12.160:8090/gdt_information/messageFeedBack/uploadImgEdit";

    // 使上传图片弹窗出现对应的“上传”tab标签
    config.removeDialogTabs = 'image:advanced;link:advanced';

    //粘贴图片时用得到
    config.extraPlugins = 'uploadimage';
    config.uploadUrl = "http://192.168.12.160:8090/gdt_information/messageFeedBack/uploadImgEdit";*/
};

5.引入使用组件

<ckeditor v-model="caseData.content"></ckeditor>

import ckeditor from "../../components/ckeditor.vue";

components: { ckeditor },

仅供小白参考