zoukankan      html  css  js  c++  java
  • react使用 UEditor富文本编辑器

    首先我们需要到官网下载 http://ueditor.baidu.com/website/download.html#ueditor 最新版本的编辑器

    将下载的压缩包打包后 把文件名改成 UEditor

    然后放在项目根目录的public文件夹下

     然后在 public文件的index.html文件引入。要按顺序引入

      <script type="text/javascript" src="UEditor/ueditor.config.js"></script>
      <script type="text/javascript" src="UEditor/ueditor.all.js"></script>
      <script type="text/javascript" src="UEditor/lang/zh-cn/zh-cn.js"></script>
    

      然后在components文件夹下创建 Editor.js 组件

      

    import React from 'react';
    
    export default class Editor extends React.Component {
    
        constructor(props) {
            super(props)
            this.state = {
                id: this.props.id || null,
                ueEditor: null
            }
        }
    
        componentDidMount() {
            var UE = window.UE;
            let { id } = this.state;
            if (id) {
                try {
                    UE.delEditor(id);
                } catch (error) { }
                let ueEditor = UE.getEditor(id, {
                    autoHeightEnabled: true,
                    autoFloatEnabled: true,
                    //字体大小
                    'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36, 48],
                    // 上传图片时后端提供的接口
                    serverUrl: '',
                    enableAutoSave: false,
                    // eslint-disable-next-line no-dupe-keys
                    autoHeightEnabled: false,
                    initialFrameHeight: this.props.height,
                    initialFrameWidth: '100%',
                });
                this.setState({ ueEditor });
                //判断有没有默认值
                ueEditor.ready((ueditr) => {
                    var value = this.props.value ? this.props.value : '<p></p>';
                    ueEditor.setContent(value);
                });
                //将文本回调回去
                ueEditor.addListener('selectionchange', (type) => {
                    //console.log(ueEditor.getContent())
                    this.props.callback(ueEditor.getContent());
                });
    
                //清空富文本内容
                //this.refs.ueditor.changeContent("");
            }
    
        }
    
        render() {
            let { id } = this.state;
            return (<div>
                <textarea id={id} style={{  this.props.width, height: this.props.height }}></textarea>
            </div>)
        }
    }
    

      然后在需要的页面引入 Editor 

     

     打开页面,我们就可以看到  Editor富文本

  • 相关阅读:
    转 Python学习(九)
    转 Python学习(八)
    转 Python学习(七)
    转 Python学习(六)
    转 Python学习(五)
    转 Python学习(四)
    转Python学习(三)
    转Python学习(一)
    面向对象第三章(向上造型、重写、重载)
    面向对象第一章(成员变量、局部变量、重载)
  • 原文地址:https://www.cnblogs.com/BySee1423/p/13156067.html
Copyright © 2011-2022 走看看