ueditor 图片上传路径的配置+react中使用

ueditor 图片上传路径的配置+react中使用

域名或ip必须一样 如下：www.test.com，否则图片上传或显示有问题
http://www.test.com:8080/ueditor 为部署到tomcat上的ueditor工程地址，工程名：ueditor
部署tomcat工程可以参考这位大神的https://blog.csdn.net/chichuhanga/article/details/78838674

js改动的地方有四处：

1. /ueditor.config.js

   // 服务器统一请求接口路径
   //, serverUrl: URL + “jsp/controller.jsp”
   , serverUrl:"http://www.test.com:8080/ueditor/jsp/controller.jsp" //------------1

2. /jsp/config.json

   /* 上传图片配置项 /
   “imagePathFormat”: “/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”, / 上传保存路径,可以自定义保存路径和文件名格式 (可以改，对4有影响)/
   “imageUrlPrefix”: "http://www.test.com:8080/ueditor/", / 图片访问路径前缀 / //------------2
   / 抓取远程图片配置 /
   “catcherPathFormat”: “/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”, / 上传保存路径,可以自定义保存路径和文件名格式 （可以改，对4有影响）/
   “catcherUrlPrefix”: "http://www.test.com:8080/ueditor/", / 图片访问路径前缀 */ //------------3

3. /dialogs/image/image.js

   /* 添加图片到列表界面上 */
   pushData: function (list) {
   …
   img.width = 113;
   list[i].url = list[i].url.substring(list[i].url.indexOf('/ueditor/ueditor'),list[i].url.length); //-----------4 (多图上传，在线管理，图片显示问题)
   //没有上面一句，url为文件实际保存的地址，如F:\java\apache-tomcat-7.0.53\webapps\ueditor\ueditor\jsp\upload\image\20181213\1544681087204051593.jpg
   //再加上图片访问路径前缀，显示就会出错
   …
   }

react中使用组件时

 //下载
  npm install react-ueditor-wrap --save
 // 导入
  import RcUeditor from 'react-ueditor-wrap';
  
   hanldeChage = (value) => {
		console.log('RcUeditor', value);
	}     
  render() {
      const ueditorConfig =  {
      // toolbars: [  //工具栏上的所有的功能按钮和下拉框
      //   ['fullscreen', 'source', 'undo', 'redo', 'bold']
      // ],
      autoHeightEnabled:false,//是否自动长高，默认true
      initialFrameWidth:700,  //初始化编辑器宽度,默认1000
      initialFrameHeight:320, //初始化编辑器高度,默认320
	 };
	 //其他配置项见http://fex.baidu.com/ueditor/#start-config
 
 	  return(
           <RcUeditor
              onChange={this.hanldeChage}
              ueditorConfigUrl={"http://www.test.com:8080/ueditor/ueditor.config.js"}
              ueditorUrl={"http://www.test.com:8080/ueditor/ueditor.all.js"}
              editorConfig={ueditorConfig}
               value='欢迎使用ueditor!'
            />
         )
   )

2019-01-29
参考这个封装组件，遇到问题
https://www.jianshu.com/p/d5d5ee66e733
richtext.js中：

 componentWillReceiveProps({ value }) {
        if (value !== this.props.value && this.editor) {
            this.editor.setContent(value);
        }
      }

会出现这种情况：ueditor还没加载完，就setContent()，页面会报错 ，加个setInterval(),如下

  componentWillReceiveProps({ value }) {
    if (value !== this.props.value && this.editor) {
      if(this.editor.body){
        this.editor.setContent(value);
      }else{
        const me = this;
        let  timer = setInterval(() => {
          if (me.editor.body) {
            console.log("componentWillReceiveProps>>>>>** clearInterval(timer);; value="+value);
            clearInterval(timer);
            me.editor.setContent(value);
          }
        }, 50)
      }
    }
  }