ckeditor 从入门到放弃

真心复杂

有一个 CKEDITOR 的全局空间,

有一个 CKEDITOR.instances的全局实例引用

有 Classic 编辑和 Inline 编辑两种模式

有 Plugin 也有 Widget

有自成一体的编译打包工具,与 AMD\CMD\UMD社区不兼容

官方兼容性

  • Desktop environments:Internet Explorer:
    • 8.0 and 9.0 – close to full support,
    • 10 and 11 – full support,
    • 9.0 Quirks Mode and 9.0 Compatibility Mode – limited support.
    • Firefox, Chrome, Safari, Microsoft Edge, Opera (Latest stable release) – full support.
  • Mobile environments:
    • Safari (iOS 6+) – close to full support,
    • Chrome (Android) – close to full support,
    • Internet Explorer Mobile (Windows Phone 8.1+) – support under evaluation.

加载

生成编辑器

经典编辑(Classic Editing)

内嵌编辑(Inline Editing)

按钮面板定制(Toolbar)

一组一组定义

一个一个定义

插件机制

假如我们开发一个插入当前时间戳的插件

插件目录结构

  • ckeditor root/
    • plugins/
      • timestamp/
        • icons/
          • timestamp.png
        • plugin.js

插件代码

通过 CKEDITOR.plugins.add方法添加插件,第一个参数为插件名,后面为参数列表。

通过editor.addCommand方法添加一个 insertTimestamp 的命令

通过editor.ui.addButton方法添加一个按钮控件,并绑定其执行的 command

通过 editor.insertHtml方法往编辑内容区域追加内容

加载插件

通过配置文件来开启插件

如果这是一个会出现在 Toolbar 的插件,且 Toolbar 被定制过,则需要显性配置 toolbar让其显示

挂件(Widget)

挂件是由一组 html 元素组成的特殊富文本单元,类似于模板机制

与插件的区别

挂件有 template 字段,插件没有

挂件目录结构

与插件一致

挂件代码

ACF

CKEditor 的高级内容过滤器,当用户在源码输入模式、editor.setData 输入、直接粘贴 html 代码等输入时候,将不希望出现的内容给过滤掉。

自动模式(Automatic Mode)

config.allowedContent 没有设置的时候,ACF 就会进入自动模式。

自动模式通过config.removePluginsconfig.removeButtonsconfig.format_tag 来做过滤微调

自定义模式(Custom Mode)

通过 config.allowedContent 来进入自定义模式

ACF语法

elements [attributes]{styles}(classes)

例如我们需要保留<span class=”mod_fillblank”>这样的富文本内容,规则为span(mod_fillblank),其 attributes 对 class 无效。

实战建议

  • 能用 CKEditor 社区插件解决的问题,用插件解决
  • 插件解决不了的问题,业务自己写plugin 或者 widget 解决
  • 业务自己写的部分,尽量不要用 CKEditor 自带的 CKEDITOR.dialog ,他们的实现是用 JS 去码DOM 结构,太复杂了。随便一个 Dialog 控件都能用得很舒服
  • 不要用CKEditor 的 jQuery Adapter,他家的 Adapter 对于同一个 DOM 的进行实例化、销毁等操作有 bug,时不时给你冒一个错误。自己包裹一个 Adapter 则肯定没有 bug
  • 工程化的时候,构建工具做依赖分析的时候,记得排除掉 CKEditor 目录,否则他家一堆的插件,会严重拖慢依赖分析那步

发表评论

电子邮件地址不会被公开。 必填项已用*标注