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

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

https://ckeditor.com/ckeditor-4/download/

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);

　　setTimeout(function(){

　　// 渲染编辑器

　　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());

　　});

　　},100)

  },
  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 },

6.CKEditor编辑器添加文本对齐，居中、居左、居右插件

1)　直接在官方下载justify插件，根据提示安装，下载地址

http://ckeditor.com/addon/justify

2)　配置config.js：

    //添加文本对齐方式
    config.extraPlugins = 'justify'

7.setData赋值不上的问题

  watch: {
    // 监听prop的变化，更新ckeditor中的值
    value: function() {
      if (this.value !== this.ckeditor.getData()) {
        this.ckeditor.setData(this.value);
        setTimeout(() => { //暂先处理setData赋值不上的问题500ms
          let body = (document.getElementById((this.ckeditor.id) + '_contents').getElementsByTagName('iframe')[0]).contentDocument.getElementsByTagName('body');
          if(body.length == 1){
            body[0].innerHTML = this.value;
          }
          // console.log('body',body)
        },500)
      }
    }
  },

8.注意部分插件之间存在依赖关系，插件需要在安装某些插件的前提下安装该插件才会生效

9.移出ckeditor的某项插件功能，在ckeditor的config.js中

config.removeButtons = 'Underline,Subscript,Superscript,NumberedList,BulletedList,Anchor,Source';

10.CKEditor的具体配置项

Source = 源码模式
-
Save = 保存(提交表单)
NewPage = 新建
Preview = 预览
- = 分割线
Templates = 模板
Cut = 剪切
Copy = 复制
Paste = 粘贴
PasteText = 粘贴为无格式文本
PasteFromWord = 从 MS WORD 粘贴
-
Print = 打印
SpellChecker = 拼写检查
Scayt = 即时拼写检查
Undo = 撤销
Redo = 重做
-
Find = 查找
Replace = 替换
-
SelectAll = 全选
RemoveFormat = 清除格式
Form = 表单
Checkbox = 复选框
Radio = 单选框
TextField = 单行文本
Textarea = 多行文本
Select = 列表/菜单
Button = 按钮
ImageButton = 图片按钮
HiddenField = 隐藏域
/
Bold = 加粗
Italic = 倾斜
Underline = 下划线
Strike = 删除线
-
Subscript = 下标
Superscript = 上标
NumberedList = 编号列表
BulletedList = 项目列表
-
Outdent = 减少缩进量
Indent = 增加缩进量
Blockquote = 块引用
CreateDiv = 创建DIV容器
JustifyLeft = 左对齐
JustifyCenter = 居中
JustifyRight = 右对齐
JustifyBlock = 两端对齐
BidiLtr = 文字方向从左到右
BidiRtl = 文字方向从右到左
Link = 插入/编辑超链接(上传文件)
Unlink = 取消超链接
Anchor = 插入/编辑锚点链接
Image = 图像(上传)
Flash = 动画(上传)
Table = 表格
HorizontalRule = 插入水平线
Smiley = 插入表情
SpecialChar = 插入特殊符号
PageBreak = 插入分页符
/
Styles = 样式快捷方式
Format = 文本格式
Font = 字体
FontSize = 文字大小
TextColor = 文字颜色
BGColor = 背景颜色
Maximize = 全屏编辑模式
ShowBlocks = 显示区块
-
About = 显示关于

参考文件：https://www.bbsmax.com/A/pRdBrqQ6dn/

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

推荐阅读