定制富文本编辑器

定制富文本编辑器

很多时候<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页面上添加样式就大功告变为。

通过这种方式，我们可以便可以在笔芯中添加任意类型的内容。

本文完~