前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

jk 1年前 ⋅ 2005 阅读

源于:今日头条(查看原文)

CKEditor是一个免费的、开源(GPL license)的HTML文本编辑器旨在简化网站内容创作,支持从Excel复制粘贴数据,拥有先进的内容过滤、控件、自定义HTML格式等功能,丰富的API文档,是一个成熟、可靠性高的产品,提供了100+的强大功能,如先进的文本格式、内置60多种语言、内容过滤等。

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

1、下载及初始化

https://ckeditor.com/download

访问以上网站下载,下载完成后解压文件并放到项目任意位置,在页面中引入CKeditorjs文件。

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

在页面中创建一个<textarea>元素,并设置id属性。

<textarea name="editor1" id="editor1" rows="10" cols="80">This is my textarea to be replaced with CKEditor.</textarea>

输入如下脚本代码。

CKEDITOR.replace('editor1');

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

完成后在页面打开测试,效果如下所示。

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

2、功能展示

①基本文本

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

②文档编辑

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

③内联编辑

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

④代码编辑

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

⑤拖拽编辑

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

⑥Excel粘贴

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

⑦高级表格选择

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

⑧Word粘贴

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

⑨图片上传

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)

官方网站:

https://ckeditor.com/

API文档:

https://sdk.ckeditor.com/


同时他也支持其他富文本编辑器所具备的基础功能,如样式调整、源代码编辑、媒体嵌入、超链接、快捷键操作、自定义宽高、自定义工具栏、自定义小组件等,我比较喜欢的就是他的内联编辑和Excel、Word粘贴,这是比较实用且大多富文本编辑器所没有的功能。

前端开发:一款开源且功能强大的富文本编辑器(CKEditor)


全部评论: 0

    我有话说: