Quill—心目中的最佳富文本编辑器.pdf

先天下之忧而忧，后天下之乐而乐。——范仲淹 Quill—⼼⽬中的最佳富⽂本编辑器 Quill—⼼⽬中的最佳富⽂本编辑器 由于长时间使⽤ UEditor编辑器，再加上 UEditor界⾯实在不够清新，不符合我的审美，遂决定给⽹站后台换⼀个富⽂本编辑器，经过⼏天 的寻找以及试⽤，终于找到了符合我这强迫症的最完美的编辑器，它就是——Quill。 ⼏⼤编辑器⽐较 UEditor 这款编辑器应该很多⼈都⽤过吧，说实话，它的功能在我看来是最全⾯、最强⼤的，不仅包含丰富的⽂本样式编辑，还有强⼤的表格编辑功 能，插⼊功能，⽽且接⼊⼗分简单，可惜的是官⽅早就不再更新了，所以样式看起来不那么“主流”，不过这个就见仁见智了，并不影响它成 为⼀款优秀的富⽂本编辑器。 Simditor 这款编辑器满⾜基本的需求，但插件不是很多，样式⽐较清新好看，对于我来说少了字体颜⾊的设置，代码⾼亮也不甚理想，要求不⾼的可 以使⽤这款。 wangEditor 这款编辑器是国内⼀个开发者开源的，功能基本⾜够，样式主流，但⽂档中说明了“从编辑器中获取的 html代码是不包含任何样式的纯 html”，就是说需要⾃⼰编写样式，但相对来说灵活多变，可以⾃⼰实现多⽪肤功能 CKEditor 这款也算中规中矩吧，有基本功能，但看了⼀圈还是没有我需要的字体颜⾊跟代码⾼亮功能，但值得⼀提的是，它有⾏内编辑功能，编辑内 容更加直观，仿佛是在编辑⽹页⼀样，这个功能还是挺强⼤的。 TinyMCE 这款编辑器很漂亮，功能也⾮常多，编辑出的⽂章样式也⼗分美观，代码⾼亮功能实现的也可以，但它却是我最不喜欢的⼀款，因为我觉得 它太重了，类似于word的菜单功能虽多，但隐藏较深，操作步骤变多，这很影响编辑⽂章的速度以及注意⼒，当然最常⽤的⼏个功能还是显 式，所以就见仁见智吧。 Froala 这款被很多⼈称为史上最NB的编辑器，的确它功能强⼤，插件丰富，可⾃定义主题和插件，我简单使⽤了⼀下，没有我需要的代码⾼亮， 所以果断放弃，或许它可以⾃定义配置，但我没有深究。 Quill 寻寻觅觅，寻寻觅觅，终于找到你，最符合我需求的编辑器——quill，样式不⽤多说，也是主流的⿊⽩清新风，美观，功能上虽然不是很 多，甚⾄还没有表格，⽹络图⽚上传（可以通过复制⽹络图⽚并黏贴解决）等功能，但它的代码⾼亮是最完美的，因为它本⾝就⽀持 了 ，同样⽀持⾏内编辑模式，可⾃定义，总的来说，这是⼀款优点多但缺点同样明显的编辑器，但却完美契合我的需求，所以我⽐ hignlight.js 较喜爱这款。 Quill 的使⽤ 志不强者智不达，言不信者行不果。——墨翟 穷则独善其身，达则兼善天下。——《孟子》 快速开始 开始构建⼀个quill编辑项⽬包括引⼊⽂件、创建⾃定义⼯具栏、创建编辑容器以及初始化这⼏部分。 <!--引⼊css⽂件 --> <link href=" 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=" <!--初始化编辑器，snow主题 --> <script> var editor = new Quill('#editor', { modules: { toolbar: '#toolbar' }, theme: 'snow' }); </script> quill主要资源介绍 <!--主要的库⽂件，js --> <script src="///1.3.6/quill.js"></script> <script src="///1.3.6/quill.min.js"></script> <!-- css⽂件，有两个主题，snow和bubble --> <link href="///1.3.6/quill.snow.css" rel="stylesheet"> <link href="///1.3.6/quill.bubble.css" rel="stylesheet"> <!--没有主题的核⼼构建,不必要的模块（使⽤不需要引⼊） --> <link href="///1.3.6/q