DevUI 是一款面向企業中後臺產品的開源前端解決方案，它倡導沉浸、靈活、至簡的設計價值觀，提倡設計者爲真實的需求服務，爲多數人的設計，拒絕譁衆取寵、取悅眼球的設計。若是你正在開發 ToB 的工具類產品，DevUI 將是一個很不錯的選擇！css

如下文章和本文相關，也許你也會喜歡：前端

引言

以前在HWEB大前端技術分享會上給你們分享過 Quill 的一些實踐，不過因爲時間關係只講了個大概，後續打算深刻淺出地對 Quill 作一個詳細的介紹。編輯器

這個系列打算從實踐的角度去講 Quill 富文本編輯器，先從 Quill 的基本使用開始吧！ide

極簡方式使用 Quill

快速開始三部曲：模塊化

安裝
引入
使用

// 安裝
npm i quill

<div id="editor"></div>

// 引入
import Quill from 'quill';

// 使用
const quill = new Quill('#editor');

雖然咱們已經初始化了 Quill 實例，可是在頁面中卻什麼也看不到。

雖然看上去什麼也沒有，可是咱們點擊空白處，會發現有一個光標，而且能夠輸入內容，並給內容增長格式（因爲沒有工具欄，只能經過 Quill 快捷鍵Ctrl+B增長格式），如下是動畫效果：

雖然只是一個極簡版的富文本編輯器，不過加上邊框和按鈕，就是一個基礎版的掘金評論框（還差插入表情和圖片）😜

這是使用 Quill 最簡單的方式。

加一些配置選項吧

配置編輯器容器元素 container

Quill 類一共有兩個參數，第一個參數是必選的編輯器容器元素container，能夠是一個CSS選擇器，好比前面的#editor，也能夠是一個DOM元素，好比：

const container = document.getElementById('editor');
// const container = document.querySelector('#editor');
// const container = $('#editor').get(0);
const quill = new Quill(container);

若是容器裏面已經有一些 HTML 元素，那麼初始化 Quill 的時候，那些元素也會渲染出來，好比：

<div id="editor">
  <p>DevUI：面向企業中後臺的前端開源解決方案</p>
  <h2>宗旨與法則</h2>
  <p>規範的組件化的目的不是爲了限制創造，而是爲了創造者更肯定、科學、高效。全部行爲決策的價值歸依是產品業務。產品業務永遠比組件化自己更重要，業務第一。</p>
  <p>規範不是絕對、教條、冷漠、強制的，實際工做中總會有新增需求、存優化空間、情感化設計需求超出通常通用規範。保持克制的同時，容許基於強烈業務需求的規範突破；以後若是有足夠的理由迭代出組件，那麼就進行組件深化。</p>
  <h2>設計語言</h2>
  <p>DevUI的價值觀奠基了 DevCloud品牌的基礎。它是 DevCloud 的設計師們思考、工做的產物，反映了 DevCloud 的產品文化、設計理念和對客戶的承諾。DevUI的這些價值觀貫穿於全部產品和麪向客戶的溝通和內容中。同時，它是 DevUI 設計原則的源頭，爲具體的設計方法提供啓發和指引。</p>
  <p>DevUI倡導<code>沉浸</code>、<code>靈活</code>、<code>致簡</code>的設計價值觀，提倡設計者爲真實的需求服務，爲多數人的設計，拒絕譁衆取寵、取悅眼球的設計。</p>
  <h2>致簡</h2>
  <p>DevUI堅持以用戶爲中心去進行設計，注重直觀可達性，把服務示例化以幫助用戶快速融入到使用中去。同時， DevUI提供大量的快捷鍵，簡化使用的流程、提升操做效率。</p>
  <h2>沉浸</h2>
  <p>DevUI的沉浸式體驗包括人的感官體驗和認知體驗，當用戶的我的技能與面對的挑戰互相匹配，而且長時間處在穩定狀態時，用戶達到心流狀態而且不易被外界因素所幹擾。</p>
  <p>在產品設計中，DevUI專一在下降用戶在完成任務目標時的認知阻力中。爲此，DevUI同時提供多種不一樣的切換頁面的途徑，包括麪包屑、快捷鍵、按鈕和連接等，方便用戶隨時快速、連續地切換頁面，到達本身所需的頁面，使用戶處於流暢的體驗中，減輕尋找信息的焦慮感。</p>
  <h2>靈活</h2>
  <p>DevUI提供超過60個獨立原子級組件，能夠自由組合，像搭積木同樣，用小組件搭建出符合自身產品須要的分子級組件，進而搭建出本身的業務系統。</p>
</div>

渲染出來的編輯器效果：

配置選項 options

第二個參數是可選的配置選項options，options是一個JSON對象，好比咱們想給咱們的編輯器增長一個主題，使它再也不那麼單調。

const quill = new Quill('#editor', {
  theme: 'snow'
});

另外須要引入該主題對應的樣式：

@import 'quill/dist/quill.snow.css';

這時咱們看到編輯器已經有一個工具欄。

而且能夠經過工具欄對編輯器的內容進行操做，好比給DevUI增長一個超連接：

除了snow主題，Quill 還內置了一個bubble氣泡主題，配置方式和snow主題同樣：

引入主題樣式
在options裏配置主題

// 引入bubble主題樣式
@import 'quill/dist/quill.bubble.css';

const quill = new Quill('#editor', {
  theme: 'bubble' // 配置 bubble 主題
});

效果以下：

bubble主題沒有顯性的工具欄，它會在你選中編輯器中的文本時，在選中文本的下方顯示一個氣泡工具欄，從而對文本進行格式化操做，好比給選中的段落增長引用格式：

更多配置選項

Quill 不只僅能夠配置主題，options一共支持8個配置選項：

bounds 編輯器內浮框的邊界
debug debug級別
formats 格式白名單
modules 模塊
placeholder 佔位文本
readOnly 只讀模式
scrollingContainer 滾動容器
theme 主題

formats 格式白名單

這個配置項很是有用，好比剛剛提到的掘金評論框，咱們發現評論框裏只能插入純文本，其餘格式都不容許，即便時粘貼進來的格式化文本也會變成純文本。

在 Quill 裏很容易實現，只須要配置formats爲空數組便可。

const quill = new Quill('#editor', {
  theme: 'snow',
  formats: []
});

注意這裏的formats格式白名單，控制的是內容實際的格式，和設置格式的渠道無關，好比formats設置爲空，那麼不管是：

經過工具欄設置格式
仍是經過快捷鍵（好比Ctrl+B）設置格式
抑或是粘貼帶格式的文本都是沒法設置格式的。

若是咱們想保留一部分格式，好比只保留粗體和列表兩種格式：

const quill = new Quill('#editor', {
  theme: 'snow',
  formats: [ 'bold', 'list' ]
});

Quill 一共支持11種行內格式：

background
bold
color
font
code
italic
link
size
strike
script
underline

7種塊級格式：

blockquote
header
indent
list
align
direction
code-block

3種嵌入格式：

formula
image
video

不配置formats選項，會默認支持全部的21種格式。

placeholder 佔位文本

咱們發現掘金的評論框在沒有輸入內容時，會有一個輸入評論...的佔位文本。

這能夠很容易地經過配置placeholder選項實現。

const quill = new Quill('#editor', {
  formats: [],
  placeholder: '輸入評論...',
});

readOnly 只讀模式

經過配置readOnly能夠實現：

初始狀態編輯器是閱讀態，不能夠編輯，能夠經過點擊編輯按鈕讓編輯器變成編輯態。

因爲掘金的評論框不支持編輯，就不拿它舉例子。

以 DevCloud 看板項目的評論框爲例，初始狀態下評論是不可編輯的，點擊編輯按鈕，變成可編輯狀態，而且顯示工具欄、保存按鈕等元素，點擊保存按鈕，新增的內容被保存，編輯器變成只讀態。

modules 模塊配置

這個配置項放在最後並不表明它不重要，偏偏相反，這是 Quill 中最重量級也是最經常使用的配置。

在以前的文章中，給你們介紹過 Quill 的模塊化機制，這個配置項就是用來配置 Quill 的模塊的。

在Quill的模塊化機制一文中，咱們提到

Quill 一共有6個內置模塊：

Clipboard 粘貼版
History 操做歷史
Keyboard 鍵盤事件
Syntax 語法高亮
Toolbar 工具欄
Uploader 文件上傳

每一個模塊的用途詳見Quill內置模塊章節。

modules選項能夠用來配置這些模塊。

配置 toolbar 模塊

Quill 默認只在工具欄中顯示一部分格式化按鈕，裏面沒有插入圖片的按鈕，咱們能夠經過配置toolbar模塊來增長。

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      // 默認的
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'link'],
      [{ list: 'ordered'}, { list: 'bullet' }],
      ['clean'],
      
       // 新增的
      ['image']
    ]
  }
});

若是想作一個掘金這樣的富文本編輯器，也很是簡單。

掘金的富文本編輯器主要包含如下工具欄按鈕：

加粗
斜體
下劃線
一級/二級標題
引用
代碼塊
行內代碼
無序列表
有序列表
超連接
插入圖片

使用 Quill 實現，須要這樣配置toolbar模塊。

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      'bold', 'italic', 'underline', 
      { header: 1 }, { header: 2 },
      'blockquote', 'code-block', 'code', 'link',
      { list: 'ordered'}, { list: 'bullet' },
      'image',
    ]
  }
});

稍微修改下樣式，就能作出一個和掘金富文本編輯器差很少的富文本編輯器啦，效果以下：

如下是和掘金實際的富文本編輯器的對比圖：

對比以上效果對比圖，除了工具欄的 icon 使用的是掘金 Markdown 編輯器的 icon 以外，其餘幾乎是同樣的。

配置 keyboard 模塊

除了工具欄模塊，咱們還能夠配置別的模塊，好比快捷鍵模塊keyboard，keyboard模塊默認支持不少快捷鍵，好比：

加粗的快捷鍵是Ctrl+B；
超連接的快捷鍵是Ctrl+K;
撤銷/回退的快捷鍵是Ctrl+Z/Y。

但它不支持刪除線的快捷鍵，若是咱們想定製刪除線的快捷鍵，假設是Ctrl+Shift+S，能夠這樣配置：

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      // 默認的
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'link'],
      [{ list: 'ordered'}, { list: 'bullet' }],
      ['clean'],
      ['image']
    ],
    
    // 新增的
    keyboard: {
      bindings: {
        strike: {
          key: 'S',
          ctrlKey: true,
          shiftKey: true,
          handler: function(range, context) {
            // 獲取當前光標所在文本的格式
            const format = this.quill.getFormat(range);
            // 增長/取消刪除線
            this.quill.format('strike', !format.strike);
          }
        },
      }
    },
  }
});

配置 history 模塊

Quill 內置的history模塊，每隔1s會記錄一次操做歷史，並放入歷史操做棧（最大100）中，便於撤銷/回退操做。

若是咱們不想記錄得那麼頻繁，想2s記錄一次，另外咱們想增長操做棧的大小，最大記錄200次操做歷史，能夠這樣配置：

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      // 默認的
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'link'],
      [{ list: 'ordered'}, { list: 'bullet' }],
      ['clean'],
      ['image']
    ],
    keyboard: {
      bindings: {
        strike: {
          key: 'S',
          ctrlKey: true,
          shiftKey: true,
          handler: function(range, context) {
            // 獲取當前光標所在文本的格式
            const format = this.quill.getFormat(range);
            // 增長/取消刪除線
            this.quill.format('strike', !format.strike);
          }
        },
      }
    },
    
    // 新增的
    history: {
      delay: 2000, // 2s記錄一次操做歷史
      maxStack: 200, // 最大記錄200次操做歷史
    }
  }
});