毕业设计真是难受, 各种坑, 踩过这个又来那个, 而且由于没有合理的记录, 下一次遇到又是一脸懵逼, 故将这些东西记录下来, 以示警醒.

emoji

chrome无法正常使用emoji

  1. 使用react-emojione
  2. Twitter开源emoji库
  3. chrome安装插件(不太理想)
  4. 自定义雪碧图, 背景定位

react-quill

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;

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

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

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

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',
);

拓展内置的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'),
    };
  }
}

webpack

webpack proxy代理配置, 导致所有的请求被限制在localhost:8888

解决办法: 为proxy配置添加前缀/api即可, 但是添加完成后, 后台静态目录无法访问, 静态资源不用添加/api前缀.

未完待续

暂时先写这么多吧, 有空再总结, 路漫漫其修远兮, 吾将上下而求索.