记录有关react-quill的坑

更新

[2019-7-21]

  • Initial release

记录

1. delta转html

  1. quill-delta-to-html
  2. Quill构造器
展开代码 
1
2
3
4
5
6
const tempCont = document.createElement('div');
(new Quill(tempCont)).setContents(JSON.parse(delta));

return tempCont
  .querySelector('.ql-editor')
  .innerHTML;

2. 自定义图片上传处理函数, 解决上传至七牛云的问题

展开代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 初始化react-quill模块
const initModules = () => ({
  ...quillModuleConfig,
  toolbar: {
    ...quillModuleConfig.toolbar,
    handlers: {
      image: handleEditorImageUpload,
    },
  },
});

const handleEditorImageUpload = () => {
  // to do something
};

3. 每次上传图片都会显示两张图片

展开代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 获取光标选区
const editorSelRange = editor.getSelection();

editor.deleteText(
  editorSelRange.index + 1,
  1,
);

// 重新调整光标位置
editor.setSelection(
  editorSelRange.index + 1,
  editor.getLenght() - 1,
  'user',
);

4. 拓展内置的img组件

内置的img组件只支持src属性, 自定义拓展Embed来增加配置项

展开代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import Quill from 'quill';

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


export interface IQuillImageBlotProps {
  alt: string;
  src: string;
  'data-src': string;
  class?: string,
};

export default class BaseQuillImageBlot extends InlineEmbed {

  public static blotName: string = 'image';
  public static tagName: string = 'img';
  public static className: string = 'inline-img';

  public static create(value: IQuillImageBlotProps) {
    const node = super.create();

    node.setAttribute('alt', value.alt);
    node.setAttribute('src', value.src);
    node.setAttribute('data-src', value["data-src"]);
    node.setAttribute('class', value.class ? value.class : BaseQuillImageBlot.className);

    return node;
  }

  public static value(node: any) {
    return {
      alt: node.getAttribute('alt'),
      src: node.getAttribute('src'),
      'data-src': node.getAttribute('data-src'),
      class: node.getAttribute('class'),
    };
  }
}

5. 七牛云的图片无法正常显示

原因: 没有注册自定义的embed组件

解决:

展开代码 
1
Quill.register(baseQuillImageBlot);

注意: 在接收到richContent之后和编辑页都要注册