React 富文本编辑器实践

React使用Quill 富文本自定义格式刷功能&复制图片&采坑 - 掘金

原文地址由于业务功能，需要实现当用户在富文本里进行可以格式化操作，内容粘贴操作的时候，如果用户复制的是图片，需要将图片上传服务器后，插入到文本内；看似合情合理的要求，却有很多坑。开始使用安装react

https://juejin.cn/post/6906384065331462158

API - Quill

Methods Examples Retrieves contents of the editor, with formatting data, represented by a Delta object. Methods Examples Retrieves the length of the editor contents. Note even when Quill is empty, there is still a blank line represented by '\n', so getLength will return 1. Methods Examples Retrieves the string contents of the editor.

https://quilljs.com/docs/api/#register

register Registers a module, theme, or format(s), making them available to be added to an editor. Can later be retrieved with Quill.import. Use the path prefix of 'formats/', 'modules/', or 'themes/' for registering formats, modules or themes, respectively. For formats specifically there is a shorthand to just pass in the format directly and the path will be autogenerated. Will overwrite existing definitions with the same path.

• Methods

Quill.register(format: Attributor | BlotDefinintion, supressWarning: Boolean = false)
Quill.register(path: String, def: any, supressWarning: Boolean = false)
Quill.register(defs: { [String]: any }, supressWarning: Boolean = false)

• Examples

var Module = Quill.import('core/module');

class CustomModule extends Module {}

Quill.register('modules/custom-module', CustomModule);

Quill.register({
  'formats/custom-format': CustomFormat,
  'modules/custom-module-a': CustomModuleA,
  'modules/custom-module-b': CustomModuleB,
});

Quill.register(CustomFormat);
// You cannot do Quill.register(CustomModuleA); as CustomModuleA is not a format

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

class ImageBlot extends BlockEmbed {
  static create(value) {
    const node = super.create();
    // 当图片地址不为 DXYCDN 时
    if (value.url && !value.url.startsWith('https://img1.dxycdn.com')) {
      let url = value.url;
      switch (true) {
        case value.url.startsWith('base64'):
          url = value.url.split('base64,')[1];
          break;

        default:
          break;
      }
      replaceImg({ urls: [url] })
        .then((res) => {
          if (res.success) {
            node.setAttribute('src', res.results.items[0].newUrl);
          } else {
            node.setAttribute('src', url);
          }
        })
        .catch(() => {
          node.setAttribute('src', url);
        });
    } else {
      node.setAttribute('src', value.url);
    }
    return node;
  }

  static value(node) {
    const url = node.getAttribute('src');
    return {
      url,
    };
  }
}

ImageBlot.blotName = 'image';
ImageBlot.tagName = 'img';

Quill.register(ImageBlot);