CKeditor 是比较好用的一款所见即所得编辑器，有多种模式可供选择，里面还可集成 leText 等第三方插件，也可以自己开发一些插件，推荐使用。上手也很简单，但是在 angular 中使用还是要费一点时间，配置上也要花点时间。

  1. 下载 ckeditor;

  2. 把 ckeditor 解压并放到 angular 的 assets 文件中;

  3. 在 angular 的 index 文件中引用 ckeditor.js;

  4. 根据自己的需求修改 ckeditor 配置文件;

  5. ckeditor 相关配置说明:

CKEDITOR.editorConfig = function(config) {
  config.language = "zh-cn"; // 编辑器语言
  config.skin = "moono"; // 编辑器皮肤,需要下载并解压到 ckeditor 的 skins 文件夹下
  config.allowedContent = true;
  config.toolbar = "Full"; // 工具条类型
  config.extraPlugins = "ckeditor_wiris"; //  添加扩展插件 ckeditor_wiris
  config.toolbar_Full = [
    ["Underline", "-", "Subscript", "Superscript", "RemoveFormat"],
    ["Image", "Table", "SpecialChar"],
    ["ckeditor_wiris_formulaEditor"]
  ]; // 配置工具条
  config.width = 360; // 编辑器宽度设置
  config.resize_enabled = false; // 编辑器拖拽设置
};

CKEDITOR.plugins.addExternal(
  "ckeditor_wiris",
  "https://www.wiris.net/demo/plugins/ckeditor/",
  "plugin.js"
); // 扩展编辑器引用

  1. ckeditor 的使用有两种模式,一种是 inline 模式,使用方法是直接在相应的元素加上 contentable = “true” 即可生效, 第二种是 textarea 模式, 使用方法是以 class 的形式引用,这个我暂时还没有触及,之后再添加;

  2. 使用 ckeditor inline 模式会有一个广告,xx 所见即所得编辑器, 这句话可以通过删除 ckeditor.js 文件中的一些语句来删掉,要删除的语句如下:

a.title =
  "string" == typeof d || !1 === d ? d : [a.lang.editor, a.name].join(", ");

也可以通过设置 config.title = ‘ ‘， 去除编辑框的 title。

  1. 工具栏加数学公式插件的方法:

(1) 下载 ckeditor_wiri , 下载 asp 版, 具体为什么,是因为我只学过 asp.net, 看着有眼缘, 使用应该都没差吧;

(2) config.js 添加如下语句:

A. config.extraPlugins = 'ckeditor_wiris';

B. [ 'ckeditor_wiris_formulaEditor']

C. CKEDITOR.plugins.addExternal('ckeditor_wiris', 'https://www.wiris.net/demo/plugins/ckeditor/', 'plugin.js');

此外,要修改显示图标可以替换掉相应的 icon

  1. CKedditor inline 模式是默认初始化一个全局实例的，也就是在页面的所有地方用 contenteditable = true 都会初始化一个 inline 编辑器，而这并不是我们想要的结果，可以通过在 index.html 中添加以下语句，禁止自动初始化编辑器： CKEDITOR.disableAutoInline = true;

  2. 禁用了默认初始化全局实例，我们要用的话，就自己在相应的组件初始化一个编辑器就行了，大概思路就是，创建一个 editors 变量用于存储 CKeditor 实例， 声明一个初始化编辑器的函数，函数接收所有类名为 ckeditor 的元素，遍历这些元素，在相应的节点上依次添加编辑器的实例（
    CKEDITOR.inline(elements[i])），保存在 editors 中，在 ngAfterViewInit() 生命周期钩子中执行函数，目的是在文档加载完之后执行函数，因为一开始元素默认隐藏状态还没加载进来，初始化不了。在执行完了函数之后，为了提高性能，记得把初始化的实例都销毁掉。