关于ckeditor4 html可视化在线编辑器的使用

已经有了ckeditor5为什么还要选择ckeditor4?

ckeditor5已经发布了很长时间,尽管一些新的功能比较前卫,但对于比价陈旧的浏览器比如IE8之类不能兼容。如果需要做一些国内电子政务管理系统,很多电脑还是xp、win7。

可能到2020年开发运行环境会有一些进化,到时候再研究一下ckeditor5,目前还是把ckeditor4先弄顺畅。

构建一个符合需要的ckeditor4

ckeditor4默认是有很多功能的,有些我们需要,默认没带,有些我们不需要,默认有。这就需要根据需求来定制ckeditor。

打开这个网址 https://ckeditor.com/cke4/builder 就可以自定义需要的功能和插件。

第一步 选择基于:Basic、Standard还是Full来构建

在之前生成zip包里有一个build-config.json,下次再打包的时候就不需要重新选择一遍,只需要上传这个配置文件即可。

三个版本

三者默认的功能对比如下

功能对比

第二步、根据自己的需要可以添加修改插件

选择插件
选择主题样式

最后、选择支持的语言并下载

选择界面语言
下载自定义版本

集成图片上传功能

编辑器上传图片的插件有很多,其中经过测试Upload Image比较好用

https://ckeditor.com/cke4/addon/uploadimage

client端配置:

config.extraPlugins = 'uploadimage'; //这个是要加载插件
config.uploadUrl = '/ckUploadFiles'; //url配置的地址必须服务端有效处理并能访问的到,返回格式是有相应要求的

上传成功时的返回:

  • uploaded – 成功的话返回 1. 这个地方只可能是1或者0,不会大于1,因为多个文件也是一次一个的上传的。
  • fileName – 上传的文件名.
  • url – 通过服务器访问上传文件的url.

上传失败的时候:

  • uploaded – 上传文件数量 0.
  • error.message – 需要给用户返回的错误信息.

server端配置:

接收的url需要在客户端指定,参数upload是一个上传文件对象数组

接下来就是服务端保存文件一套操作,不再多说,最后一定要按照返回格式给输出一个json。否则ckeditor不知道上传的结果。

默认样式的修改

在编辑器里面使用style来修改样式比直接设置字体大小、格式等要规范统一且不容易出错。

我们可以把常用的一些样式写在styles.js里面:

styles.js

发表评论

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