iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 54
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

1 則留言

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

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

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

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

我要留言

立即登入留言