xiaomaer-richeditor v1.0.2

富文本编辑器组件

xiaomaer-richeditor

概述

基于umeditor的react富文本编辑器组件。

API

数据格式

videoConfig数据格式:

{
  "autoplay": true, //自动播放，默认false
  "controls": true,// 默认false
  "loop": true //循环播放，默认false
}

toolbar的默认值:

[
  'source | undo redo | bold italic underline strikethrough | forecolor | fullscreen |',
  'insertorderedlist insertunorderedlist | cleardoc removeformat | fontfamily fontsize',
  '| justifyleft justifycenter justifyright justifyjustify indent outdent |',
  'link unlink | image video music',
  '| horizontal preview inserttable ',
    ]

注意

• 该组件插入视频仅支持mp4格式，win7下由于系统限制，最小支持48x48,最大支持1920x1088

richeditor参数

  id:"richeditor", //唯一标示，必须
  value:this.decode("<p><a href="https://www.baidu.com/" target="_blank" title="bd">bd</a><br/></p>"),  //富文本内显示的值，默认为空，demode()方法为解码方法
  videoConfig: { //视频相关配置
      autoplay: true, //自动播放，默认false
      controls: true,// 默认false
      loop: true //循环播放，默认false
  },
  height:240,//编辑器高度，默认240
  zIndex: 10001,//编辑器z-index，默认10001
  editStatus : true,  //是否可编辑，true为可编辑，false为不可编辑，只读状态(readonly)
  errorMsg: "出错了~~~！", //报错信息，默认为‘请填写正确信息’
  errorStatus: true, //是否报错
  imageUrl: "https://demo-cloud.italent.link/api/v2/Data/File/",  //本地上传时请求的上传地址，默认为当前页面地址
  parameter: "app=BeisenCloudDemo&metaObjName=BeisenCloudDemo.ceshi0602",  //本地上传时的参数，开头不加 &
  localUpload: true, //开启本地上传功能，默认false
  fileType: ['.jpeg','.jpg','.gif','.png','.bmp'],
  fileSize: '10M',
  fileSizeMessage: '上传图片不允许超过10M',
  fileTypeMessage: '上传图片格式错误,默认只支持jpeg,jpg,gif,png,bmp',
  toolbar:[
          'source | undo redo | bold italic underline strikethrough | forecolor | fullscreen |',
          'insertorderedlist insertunorderedlist | cleardoc removeformat | fontfamily fontsize' ,
          '| justifyleft justifycenter justifyright justifyjustify indent outdent |',
          'link unlink | image video music',
          '| horizontal preview inserttable ',
      ], //自定义工具栏，默认为'source | undo redo | bold italic underline strikethrough | forecolor |','insertorderedlist insertunorderedlist | cleardoc removeformat | fontfamily fontsize' ,'| justifyleft justifycenter justifyright justifyjustify indent outdent |','link unlink | image video music','| horizontal preview inserttable ',
  onChange : function(value,haveContet){} //函数参数value是指当前富文本中的value，haveContent（boolean）是指当前文本框中是否有内容
  onUploadSuccess:() => {},//图片上传成功回调
  onUploadFailure:() => {},//图片上传失败回调  
  translation: {
    lang: 'zh-cn'  // { zh-cn | en } 目前只支持这两种
  }
  pasteFormat: (html) => {return html} // 自定义格式化方法 可以对复制的文本进行格式化处理

richeditor调用方法

1.安装npm组件包

npm install xiaomaer-richeditor --save-dev

2.引用组件

import RichEditor from "xiaomaer-richeditor"

3.传入参数 该参数为上述参数，传入方式使用: {...props}

  class Demo extends Component{
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    }
  }
  decode(str){
      return str
          .replace(/"/g, '"')
          .replace(/'/g, "'")
          .replace(/&lt;/g, '<')
          .replace(/&gt;/g, '>')
          .replace(/&amp;/g, '&');
  }
 encode(str) {
    return str
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
  }
  render () {
    //视频测试地址mp4: http://f.us.sinaimg.cn/001jqIlHlx07jXQjrcEU01040200WPGC0k010.mp4?label=mp4_ld&template=300x120.28&Expires=1526894899&ssig=ZZ4YhH%2Bl%2F8&KID=unistore,video
    //http://www.w3school.com.cn/i/movie.ogg
    //http://video.699pic.com/videos/69/64/54/qgE4wF14Rye61523696454.mp4
    let options ={
      value:"http://video.699pic.com/videos/69/64/54/qgE4wF14Rye61523696454.mp4",
       videoConfig: { //视频相关配置
        autoplay: false, //自动播放，默认false
        controls: true,// 默认false
        loop: true //循环播放，默认false
      },
      height: 240,//编辑器高度，默认240
      zIndex:10001,//编辑器z-index，默认10001
      editStatus : true,
      errorMsg: "出错了~~~！", //报错信息，默认为‘请填写正确信息’
      errorStatus: true, //是否报错
      imageUrl: "http://demo-cloud.italent.link/api/v2/Data/File",  //本地上传时的上传地址，默认为当前页面地址
      parameter: "app=BeisenCloudDemo&metaObjName=BeisenCloudDemo.123",  //本地上传时的参数，开头不加 &
      localUpload: true, //开启本地上传功能
      oolbar:[
        'source | undo redo | bold italic underline strikethrough | forecolor | fullscreen |',
        'insertorderedlist insertunorderedlist | cleardoc removeformat | fontfamily fontsize' ,
        '| justifyleft justifycenter justifyright justifyjustify indent outdent |',
        'link unlink | image video music',
        '| horizontal preview inserttable ',
    ], //自定义工具栏，默认为'source | undo redo | bold italic underline strikethrough | forecolor |','insertorderedlist insertunorderedlist | cleardoc removeformat | fontfamily fontsize' ,'| justifyleft justifycenter justifyright justifyjustify indent outdent |','link unlink | image video music','| horizontal preview inserttable ',
    onChange : function(value,haveContet){
      console.log(value)
    },
    onUploadSuccess: () => {console.log('文件上传成功')},
    onUploadFailure: () => {console.log('文件上传失败')},
    pasteFormat: (html) => {return html.replace(/font-family: PingFangSC-Regular;/g,'');}
    }
    return (
      <div style={{"width":"1000px"}}>
        <RichEditor id="richeditor1" {...options}/>
      </div>
    )
  }
}
render(<Demo />, document.getElementById('content'))