Quill是當代高相容性、強大、豐富且具有擴充延展性的文字編輯器。對於行動裝置支援度高

GitHub Star: 16,000
Javascripting Overall: 90%
瀏覽器: Chrome、Firefox和IE11+
RWD: 不支援(可運作)
License: BSD 3-Clause "New" or "Revised" License

《安裝》

• CDN

    <!-- Quill v1.0.0 -->
    <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
    <script src="https://cdn.quilljs.com/1.0.0/quill.min.js"></script>
    <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet">
  

• npm

    $ npm install quill
  

《範例》

• 文字編輯器

    <div id="example">
    	<p>Hello World</p>
    </div>
    <script>
    	var quill = new Quill( "#example", {
    		theme: "snow", // 模板
    		modules: {
    			toolbar: [
    				// 工具列列表[註1]
    				['bold', 'italic', 'underline', 'strike'], // 粗體、斜體、底線和刪節線
    				['blockquote', 'code-block'], // 區塊、程式區塊
    				[{ 'header': 1 }, { 'header': 2 }], // 標題1、標題2
    				[{ 'list': 'ordered'}, { 'list': 'bullet' }], // 清單
    				[{ 'script': 'sub'}, { 'script': 'super' }], // 上標、下標
    				[{ 'indent': '-1'}, { 'indent': '+1' }], // 縮排
    				[{ 'direction': 'rtl' }], // 文字方向
    				[{ 'size': ['small', false, 'large', 'huge'] }], // 文字大小
    				[{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 標題
    				[{ 'color': [] }, { 'background': [] }], // 顏色
    				[{ 'font': [] }], // 字體
    				[{ 'align': [] }], // 文字方向
    				[ 'clean' ] // 清除文字格是
    			]
    		}
    	});
    </script>
  

  [註1]

  參數	描述

  bold|粗體
  italic|斜體
  underline|底線
  strike|刪節線
  blockquote| 區塊
  code-bloc|程式區塊
  header|標題
  list|清單
  indent|縮排
  color|顏色
  align|文字方向
  font|字體

《延伸》

1. Quill - Your powerful rich text editor
2. quilljs/quill: Quill is a modern WYSIWYG editor built for compatibility and extensibility.