【五】从零搭建react-新 增加富文本组件

1.

yarn add react-draft-wysiwyg draft-js draftjs-to-html html-to-draftjs immutable

这个玩意不好用 放弃  改用ueditor

当前最新版本为1.4.3.3

下载地址

https://github.com/fex-team/ueditor/releases

ueditor1_4_3_3-utf8-php.zip

2.开始

解压以后放在public下

在common下新建editor.js

editor.js

import React, { Component } from 'react';

export default class UEditor extends Component {

    componentDidMount() {
        let script = document.createElement("script");
        script.setAttribute('src', 'ueditor/ueditor.config.js');
        document.getElementsByTagName('head')[0].appendChild(script);
        script = document.createElement("script");
        script.setAttribute('src', 'ueditor/ueditor.all.min.js');
        document.getElementsByTagName('head')[0].appendChild(script);

        script.onload = () => {
            let UE = window.UE;
            var ue = UE.getEditor("container", {
                UEDITOR_HOME_URL: '../ueditor/',
                serverUrl: '/ueditor',
                initialFrameHeight: 300,
                toolbars: [
                    [
                        'undo', //撤销
                        'redo', //重做
                        'bold', //加粗
                        'italic', //斜体
                        'underline', //下划线
                        'strikethrough', //删除线
                        'subscript', //下标
                        'superscript', //上标
                        'source', //源代码
                        'blockquote', //引用
                        'pasteplain', //纯文本粘贴模式
                        'horizontal', //分隔线
                        'removeformat', //清除格式
                        'unlink', //取消链接
                        'inserttitle', //插入标题
                        'simpleupload', //单图上传
                        'insertimage', //多图上传
                        'link', //超链接
                        'emotion', //表情
                        'spechars', //特殊字符
                        'searchreplace', //查询替换
                        'map', //Baidu地图
                        'insertvideo', //视频
                        'justifyleft', //居左对齐
                        'justifyright', //居右对齐
                        'justifycenter', //居中对齐
                        'justifyjustify', //两端对齐
                        'fullscreen', //全屏
                        'imagecenter', //居中
                        'edittip ', //编辑提示
                        'customstyle', //自定义标题
                        'background', //背景
                        'scrawl', //涂鸦
                        'music', //音乐
                        'inserttable', //插入表格
                        'drafts', // 从草稿箱加载
                        'charts', // 图表
                        'fontfamily', //字体
                        'fontsize', //字号
                        'insertcode', //代码语言
                        'insertorderedlist', //有序列表
                        'insertunorderedlist', //无序列表
                        'lineheight', //行间距
                        'rowspacingtop', //段前距
                        'rowspacingbottom', //段后距
                        'forecolor', //字体颜色
                        'backcolor', //背景色
                        'preview', //预览
                    ]
                ]
            });

            this.editor = ue;

            ue.addListener('contentChange', () => {
                this.props.onChange(ue.getContent())
            })
        }
    }

    componentWillUnmount() {
        this.editor.destroy();

        let child = document.getElementById("edui_fixedlayer")
        child.parentNode.removeChild(child);
    }

    render() {
        return (
            <div>
                <textarea id="container" name="container" type="text/plain" onChange={() => { }}
                          value={this.props.content} style={{ margin: "15px 0" }}>
                </textarea>
            </div>
        )
    }
}

3.引用

import UEditor from 'pages/common/Editor/Editor';

onEditorChange = (editorContent) => {
    this.setState({
        editorContent:editorContent
    });
};



<Form.Item name='content2' label="内容2">
    <UEditor content={this.state.editorContent} onChange={this.onEditorChange} width="465px" height="700px" ue={this.ue} />
</Form.Item>

4.提交时获取值

params.editorContent=that.state.editorContent;

下一篇 实现菜单和路由统一管理

本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com

打赏

• 上一篇： 【四】从零搭建react-新 实现简单的路由拦截
• 下一篇： php leetcode实践【一】 两数之和