基于CKEditor4的富文本编辑器 WebPack引入说明与配置注意事项

前几天对接了个需求,说因为传统的CMS太笨重,并且一些业务结合点想落地的话改造太麻烦,想让我这边帮他做一个发布后台,前后端分离,他只负责数据和接口,其他的由我自己把控。简单看了一下需求,说是发布后台,实际上对我来说就是一个前台发布页面,只不过通过OpenID登录后,识别不同的用户身份来决定是否允许发布或者修改删除。

我之前做的发布页面都是偏简单化的东西,几个input搭配一个textarea就完事(传图/提交按钮其实也是input哈哈哈),第一次面对复杂需求说要富文本编辑器,想自己造轮子是不可能了,于是先查阅了一下现成的JS插件,倒是出乎意料的多。普遍用的比较多的还是CKEditor,包括我们公司的很多内部发布系统也是用的这个,Ok,心里有底,可以开搞了。

版本选择

因为需求要的编辑器功能比较多,我选择的是功能最强大的full版(总大小1.7M,核心文件700K),并且由于最新版的ck5包括插件只能全部走npm安装打包,对打包出来的项目文件大小影响很大(如果你和我一样不打算多个html出口的话)。

所以我选择了传统一点的ck4,可以不作为项目的核心文件打包,并且根据页面需要动态按需载入(我喜欢SPA的思维方式,哪怕用jQ也是喜欢单个页面,根据不同的Query去实现“页”与“页”之间的切换,嗯没错,这次的实现是走的jQuery去实现,Vue按理来说应该问题也不大)。

官网下载 https://ckeditor.com/ckeditor-4/download/

开发文档 https://ckeditor.com/docs/ckeditor4/latest/guide/

注:下载的时候一般无需勾选“Easy Image”,因为图片这块通常都是存自己的服务器,用不到这个功能。

开发过程

1、确认打包结构

由于jQuery在WebPack并没有像Vue那么统一的部署格式,我个人是习惯按这样的分支去安排文件的放置,app是个人开发用的文件夹,public是打包后的线上文件夹,从app里打包的东西都会生成到static里(每次都清空并重新生成带新hash的文件)。

由于编辑器工具是个无需频繁修改的插件文件,所以在public下创建了个plugins插件并放进去,这样每次打包都不会影响到plugins,如果需要发布到线上预览,也只需要更新原来的index和static,无需一直重复发布plugins。

2、动态引入插件

由于不是import到项目里,所以需要在用到编辑器的时候才把它载入进来,动态载入JS文件,jQuery是比较简单的,利用getScript引入即可,剩下的要干嘛干嘛就写到done的回调里就ok。

3、修改插件配置

执行完第2步里的东西,会发现编辑器加载过程中会有报错。

因为CKEditor有很多自己的小插件,比如语言包、编辑器的样式文件、拓展功能等,它的引入规则是“CKEditor从哪里引入,它的插件就从哪里引入”,因为核心文件ckeditor.js里有这么一个引入方式:

就相当于你在index.html里引入里了CKEditor,那么这个contents.css的路径就是直接从项目根目录里加载,然而现在我们的文件是在plugins下,所以需要修改编辑器的配置。

官网对编辑器path的说明  https://ckeditor.com/docs/ckeditor4/latest/guide/dev_basepath.html

无需修改核心文件的东西,只需要在getScript的回调里添加就行(官网是建议在html里作为全局变量配置,不过我这样子在项目里也可以生效,就放一起维护了)。

那么到这一步,编辑器就可以出来了(上面的标题和类别选择不是富文本的)。

4、传图功能实现

生成好的编辑器,默认是不显示文件上传控件的,只能插入远程图片url,通过对官网api文档的查阅,确定好传图的配置方式,添加即可实现。

官网api文档 https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

但是在上传后,出现了一个提示“不正确的服务器响应”。

一脸懵逼的翻阅文档,找到了原因,是接口返回的格式不对(相对于编辑器需要的返回结果的不对,有固定要求),解决办法如下:

官网关于传图后success与error返回的格式要求说明文档 https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html

5、文章编辑功能

编辑功能的思路,一开始是想着从接口拿到原来的文章数据后,放到编辑器内容框里就行,然而却发现编辑器是用iframe来实现。

虽然可以也可以通过操作iframe来实现,但觉得别扭,后来翻阅文档找到一个功能就是setData,CKEditor自己有api可以直接向编辑器添加数据。

汇总一下代码

到这里就暂时没有什么问题了,项目主要涉及到的功能和问题主要是上面这几个,以后有其他问题再陆续补充,目前用到的代码如下。

为您推荐

Leave a Reply

Your email address will not be published. Required fields are marked *