xheditor 封装成React组件

最新推荐文章于 2024-09-13 22:21:43 发布

原创最新推荐文章于 2024-09-13 22:21:43 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react #xheditor

代码总结专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个基于React的富文本编辑器组件实现，重点展示了如何集成图片上传功能，并通过自定义插件来扩展编辑器的功能。代码示例中包含了使用XMLHttpRequest进行文件上传的具体实现。

人狠话不多，直接上代码：

xheditor.js

import React, { Component } from 'react';


export default class Xheditor extends Component {

  constructor(props) {
    super(props);
  }
  componentDidMount(){

      const _this=this;
      var allPlugins={
          uploadimg:{
             c:'xheIcon xheBtnImg',
             t:'插入图片',
             i:function(){
                  console.log('load over');
                  $('#imgstore').change(function(e){

                      var value=e.target.value;
                      console.log(value);

                      const xhr = new XMLHttpRequest();
                      xhr.open('POST', window.Retail+'index.upload/index?alias='+window.alias);
                      const data = new FormData();
                      data.append('file', this.files[0]);
                      xhr.send(data);
                      xhr.addEventListener('load', () => {
                        // console.log(xhr.responseText)
                        const response = JSON.parse(xhr.responseText);
                        if(response && response.code === 0){
                          if(response.data && response.data.url){
                             console.log(response.data.url);

                             var html="<img src='"+response.data.url+"'/>";

                             _this.xh.pasteHTML(html)
                          }
                        }
                      });
                      xhr.addEventListener('error', () => {
                        // console.log(xhr.responseText)
                        if(xhr.responseText){
                          const error = JSON.parse(xhr.responseText);
                          console.log(error);
                        }
                      });
                  })

             },
             e:function(){

                $('#imgstore').click();

             }
          }
      };
      this.xh=$('#elm4').xheditor({
        tools:'Cut,Copy,Paste,Pastetext,|,Blocktag,FontSize,Bold,Italic,SelectAll,Removeformat,|,Align,List,Outdent,Indent,|,Link,Unlink,uploadimg,Hr,Emot,Code,map,|,Source,Print,Fullscreen',
        upImgUrl: window.Retail+'index.upload/index?alias='+window.alias,
        upImgExt:"jpg,jpeg,gif,png",
        plugins:allPlugins

      });

      this.xh.pasteHTML(this.props.content+" ");
  }
  getContent(e){
       
      var content=this.xh.getSource();
      return content
  }
  render() {
    
    return (
  	   	<div>
  	         <textarea runat="server" name="elm4" id="elm4" ref='xh' name="elm4" rows="12" cols="80" style= {{width: "100%",height:'800px'}}/>
             <input id="imgstore" type="file" style={{display:'none'}} />
  	    </div>
    );
  }
}

父组件配置：

组件引用：
<Xheditor ref='xheditor' content={this.state.xhcontent}/>

父组件调用子组件方法获得内容：
values['content'] = this.refs.xheditor.getContent();