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-boldBold/button button class=ql-italicItalic/button /div !--创建编辑容器 -- div id=editor pHello 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/quill.core.css rel=stylesheet script src=///1.3.6/quill.core.js/script 以上就是quill的库⽂件了，