- 1、本文档共4页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
先天下之忧而忧,后天下之乐而乐。——范仲淹
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的库⽂件了,
文档评论(0)