quilljs入門使用教程：
quill.js是一款強大的現代富文本編輯器插件。該富文本編輯器插件支持所有的現代瀏覽器、平板電腦和手機。它提供了文本編輯器的所有功能，並為開發者提供大量的配置參數和方法。
使用方法
在頁面中引入編輯器主題顏色文件quill.snow.css，以及quill.js文件。
<
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加速地址：
<!-- 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結構：
<!-- 創建工具欄組件 -->
<
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元素加載完畢之后，通過下面的方法來實例化一個編輯器對象。
var
editor =
new
Quill(
'#editor'
, {
modules: { toolbar:
'#toolbar'
},
theme:
'snow'
});
|
quill.js富文本編輯器配置參數查看地址：https://quilljs.com/docs/configuration/ 。
quill.js富文本編輯器API方法查看地址：https://quilljs.com/docs/api/。
quill.js富文本編輯器的github地址為：https://github.com/quilljs/quill