定制富文本編輯器

很多時候<textarea>并不能滿足我們對文本輸入的需求，當我們需要為輸入的文本添加格式時，我們需要使用像quill這樣的富文本編輯器來完成富文本的輸入。

本文将會詳細的講解如何使用羽毛筆定制一個自己的富文本編輯器。

這裡面定制了兩個特殊的功能（添加卡片，添加圖檔牆），感興趣的同學可以先看一下實作後的效果：富文本編輯器

接下來将會講解如何在quill的基礎上實作定制化的富文本編輯器。

簡介

一個好的富文本編輯器的标志就是它能夠支援多少種格式，而羽毛筆則支援無限種類的格式。你可以在羽毛筆上自定義任意種類的文本。并且，如果你不想自定義個任何功能，那麼羽毛筆也是極易上手的​

var quill = new Quill('#editor', {
  modules: { toolbar: true },
  theme: 'snow'
})      

如何在Quill上定制功能

quill提供了非常細粒度，定義良好的API，我們可以在此基礎之上進行定制化開發自己的富文本編輯器。（環境為vue + iview，使用iview進行輔助樣式開發）

首先我們從最簡單的demo入手。

<template>
  <div id="editor" class="editor"></div>
</template>
<script>
import Quill from "quill";
export default {
  mounted() {
    const quill = new Quill("#editor", {
      theme: "snow",
      placeholder: "請在此開始編輯..."
    });
  }
};
</script>      

這是一個替代參數條件下的一個富文本編輯器，我們首先對Toolbar進行替換，Toolbar是modules的一部分。

我們需要在建立quill執行個體的時候覆寫原來的工具欄，并使用自己的工具欄元素。

<template>
  <div class="container">
    <div id="toolbar">
      <Tooltip content="加粗" placement="bottom">
        <button class="ql-bold"></button>
      </Tooltip>
      <Tooltip content="傾斜" placement="bottom">
        <button class="ql-italic"></button>
      </Tooltip>
      <Tooltip content="下劃線" placement="bottom">
        <button class="ql-underline"></button>
      </Tooltip>
      <Tooltip content="删除線" placement="bottom">
        <button class="ql-strike"></button>
      </Tooltip>
    </div>
    <div id="editor" class="editor"></div>
  </div>
</template>
<script>
import Quill from "quill";
export default {
  mounted() {
    const quill = new Quill("#editor", {
      theme: "snow",
      modules: {
        toolbar: "#toolbar"
      },
      placeholder: "請在此開始編輯..."
    });
  }
};
</script>
<style lang="less" scoped></style>      

引入我們的工具欄的樣式變成如下的樣子。

quill在初始化時會讀取#toolbar元素，并擷取其子計數器的類名，對于ql-bold，quill會截取ql-之後的部分，并且和已經注冊的handlers做比對，上面的粗體斜體下劃線删除存在注冊好的handler。

當我們單擊工具欄中的元素時便會調用handler對富文本内容進行格式化。

當我們需要添加一個本不存在的格式化效果時我們還需要在子產品時，下面添加一個可以添加卡片的按鈕，并添加其對應的處理程式。

<template>
  <div class="”container“">
    <div id="toolbar">
      <Tooltip content="添加卡片" placement="bottom">
        <button class="ql-card">
          <Icon type="md-card" />
        </button>
      </Tooltip>
    </div>
    <div id="editor" class="editor"></div>
  </div>
</template>
<script>
import Quill from "quill";
export default {
  mounted() {
    const quill = new Quill("#editor", {
      theme: "snow",
      modules: {
        toolbar: {
          container: "#toolbar",
          handlers: {
            card: () => { // 屬性名稱要與 ql-xxx 對應
              console.log(`點選了 card`);
            }
          }
        }
      },
      placeholder: "請在此開始編輯..."
    });
  }
};
</script>
<style lang="less" scoped></style>      

接下來我們為這個按鈕添加實際的效果。

在我們Quill中，使用Blots表示節點，我們可以認為Blots對應Dom中的Node。當我們需要在quill中添加一自定義的Blots隊列時，我們需要讓其繼承自Blots隊列。

const BlockEmbed = Quill.import('blots/block/embed')
function customCard(node) {
  // 在一個節點中插入自定義的 dom
  const leftDiv = document.createElement('div')
  leftDiv.className = 'media-container'
  const mediaDiv = document.createElement('div')
  mediaDiv.style['background-image'] = `url(${value.image})`
  mediaDiv.className = 'media'
  leftDiv.appendChild(mediaDiv)


  const rightDiv = document.createElement('div')
  rightDiv.className = 'content-container'


  const titleP = document.createElement('p')
  titleP.className = 'title'
  titleP.innerText = value.title


  const authorP = document.createElement('p')
  authorP.className = 'author'
  authorP.innerText = value.author


  const contentP = document.createElement('p')
  contentP.className = 'content'
  contentP.innerText = value.content


  rightDiv.appendChild(titleP)
  rightDiv.appendChild(authorP)
  rightDiv.appendChild(contentP)
  node.appendChild(leftDiv)
  node.appendChild(rightDiv)
}
// 自定義卡片節點
class CardBlot extends BlockEmbed {
  static create(value) {
    const node = super.create()
    // 建立節點時傳入的資料
    node.dataset.title = value.title
    node.dataset.image = value.image
    node.dataset.content = value.content
    node.dataset.author = value.author


    customizeCard(node)


    node.setAttribute('contenteditable', false) // 設定該節點不可編輯


    return node
  }
  static value(node) {
    // 這裡需要傳回 create 函數中傳入的資料
    return node.dataset
  }
}
CardBlot.blotName = 'card' // quill 中的标記名稱
CardBlot.tagName = 'div' // dom 節點名稱
CardBlot.className = 'card' // dom 中真實的 class 名稱
Quill.register(CardBlot)      

同時我們還需要添加對應的處理程式。

const CARD_INFO = {
  title: 'Quill 編輯器',
  author: 'jhchen',
  content:
    'Quill是一種現代的富文本編輯器，旨在實作相容性和可擴充性。它由Jason Chen和Byron Milligan建立，并由Slab積極維護。 ',
  image:
    'http://neau-lib-static.test.upcdn.net/quill/resource/1576812308405-0.0544z7sqq9au-quill.png'
}


new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: {
      container: '#toolbar',
      handlers: {
        card: () => {
          const addRange = this.quill.getSelection() || 0 // 擷取目前光标選中的位置
          this.quill.insertEmbed(
            addRange,
            'card',
            CARD_INFO,
            Quill.sources.USER
          ) // 插入 card blots
          this.$nextTick(() => {
            this.quill.setSelection(addRange + 1, Quill.sources.SILENT)
          }) // 插入完成後将光标向後移動一位
        }
      }
    }
  },
  placeholder: '請在此開始編輯...'
})      

至此我們就可以通過點選card圖示來添加一個card了，但是這個card還沒有添加樣式，我們手動在顯示card頁面上添加樣式就大功告變為。

通過這種方式，我們可以便可以在筆芯中添加任意類型的内容。

本文完~