quilljs 一款简单轻量的富文本编辑器（适合移动端）

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

转载于:https://www.cnblogs.com/hubgit/p/6589781.html