业务型编辑器组件的封装（复制即可使用）-Toy模板网

这篇具有很好参考价值的文章主要介绍了业务型编辑器组件的封装（复制即可使用）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

业务型编辑器组件的封装（复制即可使用）,编辑器,javascript,前端

使用需要安装 wangeditor npm i --save wangeditor

import React from 'react';
import E from 'wangeditor';
import './index.less'

class EditorElem extends React.Component {

    constructor(props) {
        super(props);
        this.isChange = false;
        this.state = {
        }

    }
    componentDidMount() {
        const elemBody = this.refs.editorElemBody;
        this.editor = new E(elemBody)
        this.initEditor()
    }
    componentWillReceiveProps(nextProps) {

        if (nextProps.value != this.props.value) {
            if (!this.isChange) {
                this.editor.txt.html(nextProps.value)
            }
            this.isChange = false;
        }
    }

    initEditor() {
        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        this.editor.config.onchange = html => {
            this.isChange = true;
            // console.log(editor.txt.html())
            let editorContent = this.editor.txt.html();
            this.props.onChange(editorContent)
            // 不给延时，会导致详情调整过的内容修改后组件数据更新不了
            setTimeout(() => {
                this.isChange = false
            }, 50);
        }
        this.editor.config.menus = [
            'head', // 标题
            'bold', // 粗体
            'fontSize', // 字号
            'fontName', // 字体
            'italic', // 斜体
            'underline', // 下划线
            'strikeThrough', // 删除线
            'indent',
            'lineHeight',
            'foreColor', // 文字颜色
            'backColor', // 背景颜色
            'link', // 插入链接
            'list', // 列表
            'todo',
            'justify', // 对齐方式
            'quote', // 引用
            'emoticon', // 表情
            'image', // 插入图片
            'table', // 表格
            'video', // 插入视频
            'code', // 插入代码
            'splitLine',
            'undo', // 撤销
            'redo' // 重复
        ]
        this.editor.config.colors = ['#999', '#666', '#000000',
            '#eeece0',
            '#1c487f',
            '#4d80bf',
            '#c24f4a',
            '#8baa4a',
            '#7b5ba1',
            '#46acc8',
            '#f9963b',
            '#ffffff'];
        // editor.config.uploadImgShowBase64 = true;
        this.editor.config.pasteIgnoreImg = true;
        this.editor.config.uploadImgServer = `${configs.host.test}/api/FileUpload/Upload`;  // 上传图片到服务器 
        this.editor.config.uploadFileName = 'fileName'
        this.editor.config.uploadImgParams = {
            merchantId: localStorage.getItem('MerchantId'),
            Directory: 'Image'
        }
        // 限制一次最多上传 1 张图片
        this.editor.config.uploadImgMaxLength = 1;
        // 将 timeout 时间改为 3s
        // this.editor.config.uploadImgTimeout = 3000;
        this.props.zIndex && (this.editor.config.zIndex = this.props.zIndex);
        this.editor.config.uploadImgHeaders = {
            Accept: 'multipart/form-data',
            // Authorization: `Bearer ${localStorage.getItem('access_token')}`,
            // MerchantId: localStorage.getItem('MerchantId')
        }
        this.editor.config.uploadImgHooks = {
            before: function (xhr, editor, files) {
                // 图片上传之前触发
            },
            success: function (xhr, editor, result) {
                // 图片上传并返回结果，图片插入成功之后触发
            },
            fail: function (xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
            },
            error: function (xhr, editor) {
                // 图片上传出错时触发
            },
            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                var url = result.data;
                insertImg(url);
                // result 必须是一个 JSON 格式字符串！！！否则报错
            }
        }
        this.editor.create()
        this.props.value && this.editor.txt.html(this.props.value);
        // 开启编辑功能
        if (this.props.disabled) {
            this.editor.disable()
        }
        // this.editor.$textElem.attr('contenteditable', this.props.disabled ? false : true)
    }
    render() {
        return (
            <div className="text-area" >
                <div
                    style={{
                        // height: 335,
                    }}
                    ref="editorElemBody" className="editorElem-body">

                </div>
            </div>
        )
    }
}

export default EditorElem;

.editorElem-body{
    /* table 样式 */
table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
  table td,
  table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
  }
  table th {
    border-bottom: 2px solid #ccc;
    text-align: center;
  }
  
  /* blockquote 样式 */
  blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }
  
  /* code 样式 */
  code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }
  pre code {
    display: block;
  }
  
  /* ul ol 样式 */
  ul, ol {
    margin: 10px 0 10px 20px;
  }
}

 {/* 编辑器组件 ---开始 */}
                <FormItem {...formItemLayout2} label="编辑器组件">
                  {getFieldDecorator("editorValue", {
                    rules: [{ required: true, message: "请填写内容" }],
                    initialValue: detailData.editorValue,
                  })(<EditorElemItem />)}
                </FormItem>
                {/* 编辑器组件 ---结束 */}

使用便捷，无需关注内部实现和定义一堆函数，只需要传入value值即可回显数据

可以触发form的表单验证，无需额外在提交的时候验证是否有值进行message提示文章来源地址https://www.toymoban.com/news/detail-828872.html

到了这里，关于业务型编辑器组件的封装（复制即可使用）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！