iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
Modern Web

30天學習30套前端技術(2018年)系列 第 54

[十分鐘學習] Quill - 文字編輯器

example1

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

GitHub Star: 16,000
Javascripting Overall: 90%
瀏覽器: ChromeFirefoxIE11+
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.

上一篇
[十分鐘學習] sketch.js - 極簡動畫繪製
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

2 則留言

1
citypig
iT邦新手 4 級 ‧ 2018-02-12 20:12:30

你好:
你給的編輯器的範例是 sketch.js,不是 quill。
辛苦啦。

mfhsueh iT邦新手 4 級‧ 2018-02-12 20:50:07 檢舉

謝謝你,連結沒改到,祝樓主一聲平安

1
asys0512
iT邦研究生 5 級 ‧ 2018-03-09 00:04:54

請問這要怎麼運作啊?我要POST到SQL,都抓不到div內的值

mfhsueh iT邦新手 4 級‧ 2018-03-09 16:02:17 檢舉

你好,quill走的不是傳統input而是div,所以送出資料時需透過JavaScript去處理,加上官方會把editor的值轉成類似JSON的格式(Delta),並非傳統的HTML,我做了一個模擬從DB讀取/送出的範例會比較好了解,有問題可以再發問,謝謝。

https://jsbin.com/nahebiq/edit?html,console,output

我要留言

立即登入留言