前端开发:一个可扩展的现代富文本编辑器，兼容移动端(Quill)

Quill是一个开源（BSD 3-clause）、强大的现代富文本编辑器，具有较强的兼容性和可扩展性，支持在台式机、平板电脑、手机上的所有现代浏览器，使用简单

1、快速开始

https://quilljs.com/docs/download/

下载完成后解压，把解压后的文件放到项目任意位置，在页面中引入css、js即可；也可以使用CDN引入。他有snow（有工具栏）、bubble（无工具栏）两种主题，可以根据需求引入。

在页面body中创建一个编辑器容器，容器中可以写HTML代码。

运行以下脚本，一个简单的富文本编辑器就创建好了。

台式机

手机

npm安装命令：

npm install quill@1.3.3

2、基本功能演示

①自定义工具栏

quill支持自定义工具栏，工具栏组件（modules属性）允许我们方便的添加功能按钮，包括UI控件和API调用。

API调用：

UI控制：

当然除了以上两种方式外，还能添加自定义按钮，使用UI控制的方式，在工具栏容器中添加你想要的按钮即可。

②快捷键

键盘组件允许自定义按键来实现快速编辑，键的修饰符包括：metaKey、ctrlKey、shiftKey和altKey，另外shortKey是一个特定平台的修饰键，Mac上是metaKey，Linux和Windows上是ctrlKey。

多个处理程序可能会被绑定到相同的键和修饰符的组合。可以通过在handler中返回true来停止。

内置多个参数，可以实现个性化需求，如empty为true时，只有在空行该快捷键才生效，也可以通过modules.keyboard.bindings来覆盖默认的按钮绑定。

③历史模块配置

历史模块负责处理quill的撤销和重做。它可以配置以下选项：

• delay 默认1000，设置多长时间记录一次历史。

• maxStack 默认100，历史的撤销/重做栈的最大大小。

• userOnly 默认false，默认所有改变都将得到相同的待遇，不管是用户输入还是API改变，如果为true，只有用户更改会被撤销或重做。

历史配置也有方法可以直接调用，可以清除历史记录等。

④剪贴板

剪贴板处理内部和外部应用程序之间的复制、剪切和粘贴。它提供一套默认的方法，同时也可以自定义。

添加一个自定义匹配器到剪贴板。优先使用nodeType匹配，其次使用css选择器。

dangerouslyPasteHTML属性将内容由HTML片段插入编辑器在给定索引。如果没有提供插入索引将重写整个编辑内容。

编辑器目前的内容：

<p>Hello&nbsp;<strong>World</strong>!</p>

⑤语法高亮

语法高亮显示以highlight.js作为依赖，所以需要引入它的js和css。

配置highlight属性，highlight配置详情前往官网查看，在quill.modules中配置高亮按钮即可。

3、其他

quill拥有强大的灵活性和可定制性，能够实现个性化编辑器，使用也非常简单方便，兼容最新现代浏览器，不支持文件、图片上传，如果你只是做一个简单的富文本编辑器可以考虑一下。更多详细信息请前往官网查看。

在线编辑演示：

https://quilljs.com/playground/

github地址：

https://github.com/quilljs/quill

有哪里写得不好的地方请大家提出来，请轻喷，谢谢。 同时有什么与编程相关的好东西可以推举给我，再次感谢！