Quill—⼼⽬中的最佳富⽂本编辑器
Quill—⼼⽬中的最佳富⽂本编辑器
由于长时间使⽤ UEditor 编辑器，再加上 UEditor 界⾯实在不够清新，不符合我的审美，遂决定给⽹站后台换⼀个富⽂本编辑器，经过⼏天的寻以及试⽤，终于到了符合我这强迫症的最完美的编辑器，它就是——Quill。
⼏⼤编辑器⽐较
UEditor
这款编辑器应该很多⼈都⽤过吧，说实话，它的功能在我看来是最全⾯、最强⼤的，不仅包含丰富的⽂本样式编辑，还有强⼤的表格编辑功能，插⼊功能，⽽且接⼊⼗分简单，可惜的是官⽅早就不再更新了，所以样式看起来不那么“主流”，不过这个就见仁见智了，并不影响它成为⼀款优秀的富⽂本编辑器。
Simditor
这款编辑器满⾜基本的需求，但插件不是很多，样式⽐较清新好看，对于我来说少了字体颜⾊的设置，代码⾼亮也不甚理想，要求不⾼的可以使⽤这款。
wangEditor
这款编辑器是国内⼀个开发者开源的，功能基本⾜够，样式主流，但⽂档中说明了“从编辑器中获取的 html 代码是不包含任何样式的纯html”，就是说需要⾃⼰编写样式，但相对来说灵活多变，可以⾃⼰实现多⽪肤功能
CKEditor
这款也算中规中矩吧，有基本功能，但看了⼀圈还是没有我需要的字体颜⾊跟代码⾼亮功能，但值得⼀提的是，它有⾏内编辑功能，编辑内容更加直观，仿佛是在编辑⽹页⼀样，这个功能还是挺强⼤的。
TinyMCE
这款编辑器很漂亮，功能也⾮常多，编辑出的⽂章样式也⼗分美观，代码⾼亮功能实现的也可以，但它却是我最不喜欢的⼀款，因为我觉得它太重了，类似于word的菜单功能虽多，但隐藏较深，操作步骤变多，这很影响编辑⽂章的速度以及注意⼒，当然最常⽤的⼏个功能还是显式，所以就见仁见智吧。
Froala
这款被很多⼈称为史上最NB的编辑器，的确它功能强⼤，插件丰富，可⾃定义主题和插件，我简单使⽤了⼀下，没有我需要的代码⾼亮，所以果断放弃，或许它可以⾃定义配置，但我没有深究。
Quill
寻寻觅觅，寻寻觅觅，终于到你，最符合我需求的编辑器——quill，样式不⽤多说，也是主流的⿊⽩清新风，美观，功能上虽然不是很多，甚⾄还没有表格，⽹络图⽚上传（可以通过复制⽹络图⽚并黏贴解决）等功能，但它的代码⾼亮是最完美的，因为它本⾝就⽀持
了hignlight.js，同样⽀持⾏内编辑模式，可⾃定义，总的来说，这是⼀款优点多但缺点同样明显的编辑器，但却完美契合我的需求，所以我⽐较喜爱这款。
Quill 的使⽤
快速开始
开始构建⼀个quill编辑项⽬包括引⼊⽂件、创建⾃定义⼯具栏、创建编辑容器以及初始化这⼏部分。
<!-- 引⼊css⽂件 -->
<link href="cdn.quilljs/1.0.0/quill.snow.css" rel="stylesheet">
<!-- ⾃定义编辑器⼯具栏 -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- 创建编辑容器 -->
<div id="editor">
<p>Hello World!</p>
</div>
<!-- 引⼊js⽂件 -->
<script src="cdn.quilljs/1.0.0/quill.js"></script>
<!-- 初始化编辑器，snow主题 -->
<script>
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
</script>
quill主要资源介绍
<!-- 主要的库⽂件，js -->
<script src="//cdn.quilljs/1.3.6/quill.js"></script>
<script src="//cdn.quilljs/1.3.6/quill.min.js"></script>
<!-- css⽂件，有两个主题，snow和bubble -->
<link href="//cdn.quilljs/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs/1.3.6/quill.bubble.css" rel="stylesheet">
<!-- 没有主题的核⼼构建, 不必要的模块（使⽤不需要引⼊） -->
<link href="//cdn.quilljs/1.3.ss" rel="stylesheet">
<script src="//cdn.quilljs/1.3.js"></script>
以上就是quill的库⽂件了，但要实现代码⾼亮的话需要⾃⼰引⼊highlight.js库，只需要引⼊就可以了，不需要额外的配置，所以完整的引⼊，以我的项⽬为参考：
// 代码⾼亮采⽤dracula主题，可去highlight官⽹配置
<link href="cdnjs.cloudflare/ajax/libs/highlight.js/9.15.6/styles/dracula.min.css" rel="stylesheet">
// 采⽤snow主题
<link href="cdn.quilljs/1.3.6/quill.snow.css" rel="stylesheet">
// highlight.js的主要js⽂件
<script src="cdnjs.cloudflare/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
// quill的主要js⽂件
<script src="cdn.quilljs/1.3.6/quill.min.js"></script>
创建编辑器
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来创建⼯具栏冰初始化容器：
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-size"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<button class="ql-direction" value="rtl"></button>
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
<button class="ql-formula"></button>
</span>
<span class="ql-formats">
<button class="ql-clean"></button>
</span>
</div>
<div id="editor"></div>
<script>
var quill = new Quill('#editor', {
modules: {
toolbar: '#toolbar-container'
}
});
</script>
ok，这样配置并初始化之后就可以完美展⽰编辑器了，来看⼀下成果图：
获取内容
最终的结果是我们需要获取编辑的内容并保存到服务器中，这个不⽤多讲，获取容器的内容即可，但需要注意的是需要在获取的内容外包上两个div容器，不然展⽰页⾯不能展⽰编辑时所见的效果，同样，展⽰界⾯也需要引⼊quill的css以及highlight的css。
asp富文本编辑器
// 提交表单
function sub_post() {
var html = document.querySelector('#editor').children[0].innerHTML;
html = '<div class="ql-container ql-snow"><div class="ql-editor">'+html+"</div></div>";
$('[name=content]').val(html);
$("#submitForm").submit();
}
完美展⽰，效果赏⼼悦⽬
总结
更多内容可以去⽹上看⽂档，有中⽂翻译的。编辑器种类繁多，萝⼘青菜各有所爱，到适合⾃⼰的就好，当然有兴趣有时间的其实所有的编辑器都可以⾃⾏扩展出更好看的样式，使⽤之余别忘了给作者们⼀个赞。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。