富文本编辑器 quill.js 开发(四): 自定义格式扩展

前言

鉴于各种繁杂的需求，quill.js 编辑器也面临着各种挑战，例如我们需要添加“table”布局样式以适应邮件发送格式，手动扩展表情符号功能等等。本文将对这些可定制化功能进行讲解和实现。

区分 format 和 module

首先需要明确的是，我们应该清楚自己所需的扩展具体是什么?

比如想要新增一个自定义 emoji, 那么想象一下步骤:

1. 点击工具栏
2. 弹出弹窗或者对应的 popover
3. 在 2 中选中 emoji

这些步骤是一种常见的添加流程。

我们需要明确的是，添加自定义表情符号必然需要一个相应的格式。

本文将以 format 为例，对此进行详细讲解。

quill 的格式类型

说起 quill 的格式类型, 他的常用格式可以分成 3 类:

1. Inline
   常见的有 Bold, Color, Font 等等, 不占据一行的标签, 类似于 html 里 span 的特性, 是一个行内样式, Inline
   格式之间可以相互影响
2. Block
   添加 Block 样式, 必然会占据一整行, 并且 Block 样式之间不能兼容(共存), 常见的有 List, Header, Code Block 等等
3. Embeds
   媒体文件, 常见的有 Image, Video, Formula, 这类格式扩展的比较少, 但是本次要加的 emoji 但是这种格式

自定义样式

新增 emoji.ts 文件来存储格式, 关于他的类型, 我们选择 Embeds 格式, 使用这种格式有以下原因:

1. 他是一种独特的类型, 不能和颜色, 字体大小等等用在一起
2. 需要和字体并列, 所以也不能是 Block 类型

import Quill from 'quill';

const Embed = Quill.import('blots/embed');

class EmojiBlot extends Embed {
  static blotName: string;
  static tagName: string;

  static create(value: HTMLImageElement) {
    const node = super.create();
    node.setAttribute('alt', value.alt);
    node.setAttribute('src', value.src);
    node.setAttribute('width', value.width);
    node.setAttribute('height', value.height);
    return node;
  }

  static formats(node: HTMLImageElement) {
    return {
      alt: node.getAttribute('alt'),
      src: node.getAttribute('src'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height'),
    };
  }

  static value(node: HTMLImageElement) {
    // 主要在有初始值时起作用
    return {
      alt: node.getAttribute('alt'),
      src: node.getAttribute('src'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height'),
    };
  }
}

EmojiBlot.blotName = 'emoji';
EmojiBlot.tagName = 'img';
EmojiBlot.className = 'emoji_icon'

export default EmojiBlot;

因为还有正常的图片类型会使用 img, 这里就需要加上 className, 来消除歧义
一般来说, 新开发的扩展性类型, 尽量都加上 className

这样一个 emoji 类型就创建完成了!

最后我们注册到 Quill 上即可:

import EmojiBlot from "./formats/emoji";

Quill.register(EmojiBlot);

这里我们在加上自定义的 popover, 用来点击获取 emoji:

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: VC2008编译libthrift

VC2008编译libthrift thrift只提供了VC2010的sln文件。 用Project From Existing Code… 创建工程。 将 cpp/src/thrift 加入工程。 在Solution Explorer中， 去除 qt 目…