Quill 实践指南

时间: 2020-01-10阅读: 1191标签: 指南

quill 定制富文本编辑器

很多时候 <textarea> 并不能满足我们对文本输入的需求,当我们需要为输入的文本添加格式时,我们需要使用像 quill 这样的富文本编辑器来完成富文本的输入。

本文将会详细的讲解如何使用 quill 定制一个自己的富文本编辑器。

这里面定制了两个特殊的功能(添加卡片、添加图片墙),感兴趣的同学可以先看一下实现后的效果 
线上效果
github 仓库

接下来将会讲解如何在 quill 的基础上实现定制化的富文本编辑器。


quill 简介

一个好的富文本编辑器的标志就是它能够支持多少种格式,而 quill 支持无限种类的格式。你可以在 quill 上定制任意种类的文本。并且,如果你不想自定义个任何功能,那么 quill 也是极易上手的,如下的一段代码就可以创建一个简单的富文本编辑器了。

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

quill 自带了一套数据系统方便我们自由的扩展想要的功能,Parchment 和 Delta

Parchment

Parchment 是抽象的文档模型,是一种与 Dom 树很类似的结构,Parchment 用于存储我们的文档结构,另外 Parchment 由 Blot 组成,关于 Blot 可以理解为 Parchment 的 Node 节点,Blot 中可以包含结构、内容、样式等。

Delta

Delta 是一个 json 结构的数据,用来记录编辑器产生的变化。Delta 中的每一项数据代表了一次操作。
同时我们也可以通过 Delta 操作编辑器中的内容。

new Delta().retain(2).delete(4)

retain(2) 表示跳过编辑器中前 2 个 Blot
delete(4) 表示删除编辑器中的接下来的 4 个 Blot

Blot

Blot 是 Parchment 的组成部分,是一种类似于 Dom Node 的结构,Blot 有其自己的接口规范

在 Parchment 中主要有3种 Blot

Block Blot

块级元素的基本实现(可以在其内部插入其他的 Blot)

Inline Blot

内联元素的基本实现(可以在其内部插入其他 内联 的 Blot)

Embed Blot

 非文本叶子节点的基本实现(这种 Blot 内部不允许再插入其他的 Blot,通常用来实现 Dom 中 <img> <video> 这类标签对应的 Dom 结构)

Blot 一般通过调用 Parchment.create() 创建,我们可以覆盖 create 方法,并在覆盖的方法中通过 super 调用被我覆盖的方法,来保留 Blot 的默认行为。

一般情况下我们还需要实现 value() 方法,value() 方法返回 create() 方法中的参数值

class MyBlot extends Parchment.Block {
    static create(value){
        const node = super.create();
        // 接下来自定义其他功能
        node.setAttribute('attribute',value)
    }
    value(node){
        return node.getAttribute('attribute')
    }
}

在我们自定义了一个 Blot 后,这时我们还不能在 quill 中使用它,还需要进行注册。

MyBlot.blotName = 'MyBlot'
MyBlot.tagName= 'div'
MyBlot.className= "my-blot"
Quill.register(MyBlot)

关于 Quill 的前置知识介绍这么多,下面会通过一个 Demo 来加深理解.

如何在 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 的一部分。

avatar

我们需要在新建 quill 实例的时候覆盖原来的 toolbar,并使用的自己的 toolbar 元素。

<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>

会将我们的 toolbar 的样式变成如下的样子。

avatar

quill 在初始化时会读取 #toolbar 元素,并获取其子节点的 classNames,对于 ql-bold ,quill 会截取 ql-之后的部分,并且和已经注册的 handlers 做匹配,上面的 bold italic underline strike 存在注册好的 handler。当我们点击 toolbar 中的元素时便会调用 handler 对富文本内容进行格式化。

当我们需要添加一个本不存在的格式化效果时我们还需要在 modules 中补充它的 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)

同时我们还需要添加对应的 handler

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 页面上添加样式就大功告成了。

通过这种方式,我们可以便可以在 quill 添加任意类型的内容。


最后

文章中的代码片段有时候看起来并不清晰,如果感兴趣,可以去看一看这个小 demo: 线上效果github 仓库
对 quill 的使用有个整体印象,甚至可以方便的 copy 代码,在 demo 中实现了一个 图片墙 的功能,帮助大家开阔思路。

原文:https://segmentfault.com/a/1190000021549175

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7228

关闭

Gulp4.0入门指南

gulp4.0分离了cli和核心部分,所以需要分别安装这两个包,另外对环境要求如下:在项目根目录创建gulpfile.js文件(如果使用ts或者babel,也可用gulpfile.ts、gulpfile.babel.js分别代替

使用JavaScript进行面向对象编程的指南

一切都从对象开始。对象,即我们相互交流的一个载体,有其属性和方法。对象是面向对象编程的核心,不仅用于JavaScript,而且还适用于Java、C语言、C++等。

JS对象的 rest/spread 属性指南

在ES5中,咱们合并对象通常使用Lodash的_.extend(target, [sources]) 方法,在ES6中咱们使用 Object.assign(target, [sources])来合并对象,当然现在最常用应该是使用 Rest/Spread(展开运算符与剩余操作符)。

MongoDB指南

MongoDB 是一种NoSQL 数据库,存储的数据对象由键值对组成。MongoDB 所有存储在集合中的数据都是 BSON 格式。BSON 是一种类似 JSON 的二进制形式的存储格式

JavaScript 类完整指南

JavaScript 使用原型继承:每个对象都从其原型对象继承属性和方法。在 JavaScript 中不存在 Java 或 Swift 等语言中所使用的作为创建对象 蓝图的传统类,原型继承仅处理对象。

Js中装逼指南

本文秉承着你看不懂是你sb,我写的代码就要牛逼的理念来介绍一些js的装逼技巧。下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题)

vue 官方风格指南解析

Vue 有个官方的风格指南,我从中摘抄了些认为比较重要、自己常忽略的点,加上一些分析列出来。也可以直接去观看风格指南

RxJS响应式编程入门指南

RxJS 是 Reactive Extensions for JavaScript 的缩写,起源于 Reactive Extensions,是一个基于可观测数据流 Stream 结合观察者模式和迭代器模式的一种异步编程的应用库。RxJS 是 Reactive Extensions 在 JavaScript 上的实现

程序员过年过年相亲指南不完全手册

尽量不要选择 kfc之类快餐店,也不要选择火锅店、那种需要拿手套啃东西的就餐类型场所。例如 当你在这样啃骨头的时候,相亲对象是如何看待你?只要不是非常离谱的价格,不是被套路了,都应该大胆买单

前端任务构建利器Gulp.js使用指南

在软件开发中,任务运行器的好处是不言而喻的。它们可以帮助自动运行常见的冗长的任务,让你可以专注于更重要的事情中,比如敲出很棒的代码。说的严肃点,自动运行一些比如图片压缩、代码压缩

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广