富文本编辑器（wangEditor）使用以及其他问题

Posted on | In

富文本采用wangEditor

创建

主界面
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
// app.js
import React, { Component } from 'react';
import E from 'wangeditor';
import { MENUS_CONFIG, UPLOAD_ADDRESS, UPLOAD_MAXLENGTH, UPLOAD_FILENAME } from './wangEditorSettings';

class App extends Component {
    constructor(props) {
        super(props);
        
        //创建工具栏与内容区ref
        this.editorElem = React.createRef();
        this.editorContent = React.createRef();
    }
    
    componentDidMount() {
        const editor = new E(this.editorElem.current, this.editorContent.current);
        editor.customConfig.onchange = html => {
            this.props.form.setFieldsValue({
                description: html,
            });
        }
        editor.customConfig.menus = MENUS_CONFIG;
        editor.customConfig.uploadImgServer = UPLOAD_ADDRESS;
        editor.customConfig.uploadFileName = UPLOAD_FILENAME;
        editor.customConfig.uploadImgMaxLength = UPLOAD_MAXLENGTH;

        editor.create();
    }
    
    render() {
        return(
            <div>
                <div ref={this.editorElem} className={styles['editor-bar']}></div>
                <div ref={this.editorContent} className={styles['editor-content']}></div>
            </div>
        );
    }
}
配置文件
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
// wangEditorSettings.js
const MENUS_CONFIG = [
    'head',  // 标题
    'bold',  // 粗体
    'fontSize',  // 字号
    'fontName',  // 字体
    'italic',  // 斜体
    'underline',  // 下划线
    'strikeThrough',  // 删除线
    'foreColor',  // 文字颜色
    // 'backColor',  // 背景颜色
    'link',  // 插入链接
    'list',  // 列表
    'justify',  // 对齐方式
    'quote',  // 引用
    // 'emoticon',  // 表情
    'image',  // 插入图片
    'table',  // 表格
    'video',  // 插入视频
    'code',  // 插入代码
    'undo',  // 撤销
    'redo'  // 重复
];

const UPLOAD_ADDRESS = '/api/v1/upload/image';

const UPLOAD_MAXLENGTH = 1;

const UPLOAD_FILENAME = 'upload';

export {
    MENUS_CONFIG,
    UPLOAD_MAXLENGTH,
    UPLOAD_ADDRESS,
    UPLOAD_FILENAME
};

界面显示带标签内容

主要是采用React提供的dangerouslySetInnerHTML。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// view.js
class View extends Component {
    constructor(props) {
        super(props);
        //...
    }
    
    //...
    
    render() {
        const { description } = this.state;
        return(
            <div 
                className={styles['description']} 
                dangerouslySetInnerHTML={{__html: description && description.replace(/<script>/, '&lt;script&gt;').replace(/<\/script>/, '&lt;script&gt;')}}
            >
            </div>
        );
    }
}

参考资料

wangEditor3使用手册