前端心目中的最佳富文本编辑器 之 Quill ，你用过那些呢？收藏备用

---

---

---

7、Quill

---

链接：https://quilljs.com/

寻寻觅觅，寻寻觅觅，终于找到你，最符合我需求的编辑器——quill，样式不用多说，也是主流的黑白清新风，美观，功能上虽然不是很多，甚至还没有表格，网络图片上传（可以通过复制网络图片并黏贴解决）等功能，但它的代码高亮是最完美的，因为它本身就支持了hignlight.js，同样支持行内编辑模式，可自定义，总的来说，这是一款优点多但缺点同样明显的编辑器，但却完美契合我的需求，所以我比较喜爱这款。

===

===

Quill 的使用

=============

快速开始

---

开始构建一个quill编辑项目包括引入文件、创建自定义工具栏、创建编辑容器以及初始化这几部分。

Bold

Italic

Hello World!

quill主要资源介绍

---

---

以上就是quill的库文件了，但要实现代码高亮的话需要自己引入highlight.js库，只需要引入就可以了，不需要额外的配置，所以完整的引入，以我的项目为参考：

// 代码高亮采用dracula主题，可去highlight官网配置

// 采用snow主题

// highlight.js的主要js文件

// quill的主要js文件

创建编辑器

---

quill的使用也很简单，引入上面的资源之后就可以开始创建编辑器了。

首先需要定义编辑器的工具栏，有两种方式，一种是直接html创建，一种是通过js创建，相对来说html更加直观一些，这里就简单的放两个示例介绍一下。

通过一个js数组来配置初始化容器：

var toolbarOptions = [

[‘bold’, ‘italic’, ‘underline’, ‘strike’], // 切换按钮

[‘blockquote’, ‘code-block’],

[{ ‘header’: 1 }, { ‘header’: 2 }], // 用户自定义按钮值

[{ ‘list’: ‘ordered’}, { ‘list’: ‘bullet’ }],

[{ ‘script’: ‘sub’}, { ‘script’: ‘super’ }], // 上标/下标

[{ ‘indent’: ‘-1’}, { ‘indent’: ‘+1’ }], // 减少缩进/缩进

[{ ‘direction’: ‘rtl’ }], // 文本下划线

[{ ‘size’: [‘small’, false, ‘large’, ‘huge’] }], // 用户自定义下拉

[{ ‘header’: [1, 2, 3, 4, 5, 6, false] }],

[{ ‘color’: [] }, { ‘background’: [] }], // 主题默认下拉，使用主题提供的值

[{ ‘font’: [] }],

[{ ‘align’: [] }],

[‘clean’] // 清除格式

];

var quill = new Quill(‘#editor’, {

modules: {

toolbar: toolbarOptions

},

theme: ‘snow’

});

通过html来创建工具栏冰初始化容器：

ok，这样配置并初始化之后就可以完美展示编辑器了，来看一下成果图：

获取内容

---

最终的结果是我们需要获取编辑的内容并保存到服务器中，这个不用多讲，获取容器的内容即可，但需要注意的是需要在获取的内容外包上两个div容器，不然展示页面不能展示编辑时所见的效果，同样，展示界面也需要引入quill的css以及highlight的css。

// 提交表单

function sub_post() {

var html = document.querySelector(‘#editor’).children[0].innerHTML;

html = ‘

’+html+“

”;

$(‘[name=content]’).val(html);

$(“#submitForm”).submit();

}

完美展示，效果赏心悦目

总结

==

更多内容可以去网上看文档，有中文翻译的。编辑器种类繁多，萝卜青菜各有所爱，找到适合自己的就好，当然有兴趣有时间的其实所有的编辑器都可以自行扩展出更好看的样式，使用之余别忘了给作者们一个赞。

[

阅读世界，共赴山海
423全民读书节，邀你共读
总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

mg.cn/629725b662f643aa8a48cbf0bb170720.png)

阅读世界，共赴山海 [外链图片转存中…(img-tYE8F4x9-1718857587825)]
423全民读书节，邀你共读
总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；