富文本编辑器之wangEditor

富文本编辑器之wangEditor

在公司做项目时，遇到了需要富文本编辑器能够上传图片到服务器，上网找了一些，发现了一个国内开源的富文本编辑器----wangEditor，由于是国内的，文档介绍比较清楚，个人认为上手起来也很方便。如果工作上你有类似需求，不妨可以去官网看看，官网地址

由于现在做的项目前端用的是React，这个编辑器完全支持React ,同时也支持Vue。官网所说：快速接入，配置简单，几行代码即可生成。集成了所有常见功能，无需二次开发。在 Vue React 也可以快速接入。

我是参看该编译器的作者的文章《50 行代码 React Hooks 中使用 wangEditor 富文本编辑器》来进行上手的，下面是我的例子：

import React, { useState, useEffect } from 'react'
import { message } from 'antd';
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
export default function RichEditor(props) {
    const [editor, setEditor] = useState(null) // 存储 editor 实例
    const defaultContent = [] // 编辑器默认内容，空内容
    const toolbarConfig = {} // 菜单栏配置
    // 编辑器配置
    const editorConfig = {
        placeholder: '请输入内容...',
        onCreated: (editor) => {
            // 这里我是从localStorage中读取，进行回显数据用的，这里应该可以使用props父传子进行回显数据
            let user = JSON.parse(localStorage.getItem('pageInformationContentDetails'));
            // 编辑器创建之后，记录 editor 实例，重要 ！！！ （有了 editor 实例，就可以执行 editor API）
            if (user !== null)
                editor.children = user;
            setEditor(editor);
        },
        onChange: (editor) => {
            // editor 选区或者内容变化时，获取当前最新的 content
            let content = JSON.stringify(editor.children);
            //editor 选区或者内容变化时，获取当前最新的html格式的内容
            const html = editor.getHtml()
        }
        , MENU_CONF: {}
    }

    //这里是上传图片触发
    editorConfig.MENU_CONF['uploadImage'] = {
        server: 'https://xxxxxx',//这里是上传图片的接口
        onSuccess(file, res) {
            message.success('图片上传成功');
        },
        onFailed(file, res) {
            message.error('图片上传失败，请重试');
        },
        // 上传错误，或者触发 timeout 超时
        onError(file, err, res) {
            message.error('图片上传错误，请重试');
        },
    }



    // 组件销毁时，及时销毁 editor 实例，重要！！！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy();
            setEditor(null);

        }
    }, [editor])
    return (
        <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
            {/* 渲染 toolbar */}
            <Toolbar
                editor={editor}
                defaultConfig={toolbarConfig}
                style={{ borderBottom: '1px solid #ccc' }}
            />

            {/* 渲染 editor */}
            <Editor
                defaultConfig={editorConfig}
                defaultContent={defaultContent}
                style={{ height: '500px' }}
            />
        </div>
    )
}

上面上传图片的功能可以参看官方文档–上传图片模块