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结构:
<!-- 创建工具栏组件 -->
<
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
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)