Quill是一个轻量级、可定制和跨浏览器的富文本编辑器。并且截止至今天（2018年02月06日），目前在前端库的富文本编辑器中评分最高的编辑器。具体如下：

效果图

相关介绍

具体用法

  • 代码如下（默认工具栏、自定义工具栏、全部工具栏）：

     <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>quill编辑器-demo</title>
     <link href="https://cdn.quilljs.com/1.3.5/quill.snow.css" rel="stylesheet">
   </head>
   <body>

     <div style="width:800px;margin: 0 auto;">
       <h2>1、默认工具栏</h2>
       <div id="editor1">
       </div>

       <h2>2、自定义工具栏</h2>
       <div id="toolbar">
         <button class="ql-bold">Bold</button>
         <button class="ql-italic">Italic</button>
       </div>
       <div id="editor2">
         <p>只读，不可写入！</p>
       </div>

       <h2>3、所有工具栏</h2>
       <div id="toolbar-container">
         <span class="ql-formats">
           <select class="ql-font"></select>
           <select class="ql-size"></select>
         </span>
         <span class="ql-formats">
           <button class="ql-bold"></button>
           <button class="ql-italic"></button>
           <button class="ql-underline"></button>
           <button class="ql-strike"></button>
         </span>
         <span class="ql-formats">
           <select class="ql-color"></select>
           <select class="ql-background"></select>
         </span>
         <span class="ql-formats">
           <button class="ql-script" value="sub"></button>
           <button class="ql-script" value="super"></button>
         </span>
         <span class="ql-formats">
           <button class="ql-header" value="1"></button>
           <button class="ql-header" value="2"></button>
           <button class="ql-blockquote"></button>
           <button class="ql-code-block"></button>
         </span>
         <span class="ql-formats">
           <button class="ql-list" value="ordered"></button>
           <button class="ql-list" value="bullet"></button>
           <button class="ql-indent" value="-1"></button>
           <button class="ql-indent" value="+1"></button>
         </span>
         <span class="ql-formats">
           <button class="ql-direction" value="rtl"></button>
           <select class="ql-align"></select>
         </span>
         <span class="ql-formats">
           <button class="ql-link"></button>
           <button class="ql-image"></button>
           <button class="ql-video"></button>
           <button class="ql-formula"></button>
         </span>
         <span class="ql-formats">
           <button class="ql-clean"></button>
         </span>
       </div>
       <div id="editor-container" style="height: 100px;"></div>
     </div>
     <script src="https://cdn.quilljs.com/1.3.5/quill.js"></script>
     <script>

       var quill1 = new Quill('#editor1', {
         placeholder: '请输入...',
         theme: 'snow'
       });
       var quill2 = new Quill('#editor2', {
         modules: { toolbar: '#toolbar' },
         theme: 'snow',
         readOnly: true
       });
       var quill3 = new Quill('#editor-container', {
         modules: {
           formula: true,
           syntax: true,
           toolbar: '#toolbar-container'
         },
         placeholder: 'Compose an epic...',
         theme: 'snow'
       });
     </script>

    ​

  • 效果如下：

    效果图

详见【demo】

以上文章来自：黄卉 ， https://huanghui8030.github.io/js/quill.html