quill.js是一款强大的现代富文本编辑器插件。该富文本编辑器插件支持全部的现代浏览器、平板电脑和手机。它提供了文本编辑器的全部功能，并为开发者提供大量的配置参数和方法。javascript
使用方法
在页面中引入编辑器主题颜色文件quill.snow.css，以及quill.js文件。css
<
link
href
=
"http://cdn.quilljs.com/1.0.0/quill.snow.css"
rel
=
"stylesheet"
>
<
script
src
=
"http://cdn.quilljs.com/1.0.0/quill.js"
></
script
>
|
下面是quill.js的CDN加速地址：html
<!-- Main Quill library -->
<
script
src
=
"//cdn.quilljs.com/1.0.3/quill.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"//cdn.quilljs.com/1.0.3/quill.min.js"
type
=
"text/javascript"
></
script
>
<!-- Theme included stylesheets -->
<
link
href
=
"//cdn.quilljs.com/1.0.3/quill.snow.css"
rel
=
"stylesheet"
>
<
link
href
=
"//cdn.quilljs.com/1.0.3/quill.bubble.css"
rel
=
"stylesheet"
>
<!-- Core build with no theme, formatting, non-essential modules -->
<
link
href
=
"//cdn.quilljs.com/1.0.3/quill.core.css"
rel
=
"stylesheet"
>
<
script
src
=
"//cdn.quilljs.com/1.0.3/quill.core.js"
type
=
"text/javascript"
></
script
>
|
HTML结构
使用下面的代码做为文本编辑器的HTML结构：java
<!-- 建立工具栏组件 -->
<
div
id
=
"toolbar"
>
<
button
class
=
"ql-bold"
>Bold</
button
>
<
button
class
=
"ql-italic"
>Italic</
button
>
</
div
>
<!-- 建立文本编辑器 -->
<
div
id
=
"editor"
>
<
p
>Hello World!</
p
>
</
div
>
|
初始化插件
在页面DOM元素加载完毕以后，经过下面的方法来实例化一个编辑器对象。git
var
editor =
new
Quill(
'#editor'
, {
modules: { toolbar:
'#toolbar'
},
theme:
'snow'
});
|
quill.js富文本编辑器配置参数查看地址：https://quilljs.com/docs/configuration/ 。github
quill.js富文本编辑器API方法查看地址：https://quilljs.com/docs/api/。api
quill.js富文本编辑器的github地址为：https://github.com/quilljs/quill浏览器