React调用百度富文本存在的一些问题

项目场景：

react 项目中要使用百度富文本

具体流程：

1. 打开百度富文本官网

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

将源码克隆下来

在此文件夹下来执行下面命令

//如果电脑没有安装grunt 执行以下第一个命令
npm install grunt -g
//然后给ueditor安装依赖
npm install
//再执行
grunt default

这两就是被grunt default 出来的文件

将这个utf-8-php 文件夹改名为ueditor 然后就可以放到我们项目里的静态文件夹中

因为静态文件不会被编译

2.接下来要画出编辑器

/*
 * @Author: An
 * @Email: 1065309135@qq.com
 * @Company: 智慧农旅党
 * @version: 1.0
 * @Date: 2021-03-19 16:11:54
 * @LastEditTime: 2021-03-27 17:05:13
 * @LastEditors: An
 * @Description: Do not edit
 * @FilePath: /大石桥pc管理系统/CloudPlatform1.0/src/components/common/Ueditor1/index.tsx
 */

import React, { useState, useEffect } from 'react';
import { Button } from 'antd'
import '../../../../public/static/UE/ueditor.config'
import '../../../../public/static/UE/ueditor.all'
import '../../../../public/static/UE/lang/zh-cn/zh-cn'

const Ueditor = (props) => {
  useEffect(() => {
    initEditor()
    // let editor = window.UE.getEditor("editor",{});
    // console.log(editor)
  }, [])

  const initEditor = () => {
    // const { id, config } = this.props;
    console.log(UE,"UE")
    const ueEditor = UE.getEditor(props.id, {
      autoHeightEnabled: true,
      autoFloatEnabled: true
      //字体
      , enableAutoSave: false,
      // , initialFrameHeight: this.props.height
      // , initialFrameWidth: '100%'
      // ,readonly:this.props.disabled
      initialFrameWidth: '100%',
      initialFrameHeight: 400
    });
    // 图片上传的地址
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    // 对上传图片的地址做特殊设置
    UE.Editor.prototype.getActionUrl = function (action) {
   
      if (action == 'uploadimage' || action == 'uploadscrawl') {
        return 'http://xxx'; //在这里返回我们实际的上传图片地址
      }else if(action == 'uploadfile'){
        return 'http://'; //在这里返回我们实际的上传图片地址
      } else {
        return this._bkGetActionUrl.call(this, action);
      }
    }

    // 组件初始化回显内容
    ueEditor.addListener("ready", () => {
      ueEditor.setContent('<p style="line-height: 16px;"><img style="vertical-align: middle; margin-right: 2px;" src="/static/UE/dialogs/attachment/fileTypeImages/icon_jpg.gif"/><a style="font-size:12px; color:#0066cc;" href="http://60.22.46.138:8016/data/uploads/preview/default/file/2021/3/27/7129f03f3979995488f27ed4170cacd5/image/png/1616834022561ssp.png" title="1616834022561ssp.png">1616834022561ssp.png</a></p><p>asdasdasdask萨达卡健身打卡收到空间啊啥的<img src="http://img.baidu.com/hi/jx2/j_0015.gif"/><br/></p>');
    });

    ueEditor.ready((ueditor) => {
      // var value = that.props.value?that.props.value:'<p></p>';
      // editor.setContent(value); 
      console.log(ueditor, 'ueditor')
      if (!ueditor) {
          debugger
        // 如果初始化后ueditor不存在删除后重新调用
        UE.delEditor(props.id);
        initEditor();
      }
    })
  }

  /**获取内容 */
  const getContent = () => {
    console.log(UE,"ue",props.id)
    console.log(UE.getEditor(props.id).getContent(), '富文本内容')
    return UE.getEditor(props.id).getContent()
  }


  return (
    <div>
      <div id={props.id} type="text/plain" style={{ width: 800, height: 400 }}></div>
    </div>
  )

}
export default Ueditor;

这是我的组件代码

本来想在这个文件下引入富文本编辑器所需要的js 文件的 结果一直引不进来 所以索性在组件中直接import 引入了

然后编辑器就画出来了

3. 接着坑就来了 上传配置

在config.js 中修改文件根目录

这个json 本来是从后台请求返回的 也可以直接写在前端 这样就不用麻烦后台小姐姐了
这个json 走个流程而已 因为我们是前后台分离的 不可能将后台的代码放前端代码里 上传成功后直接使用返回的图片地址即可

这个地方才是关键 直接返回你的上传接口即可 如果上传图片文件有不一样的可以拆开来写
注意⚠️ 有个地方很关键

画红框的地方是我修改过后的
上传后源码有判断 接口返回的state == SUCCESS 才会走下面正常流程
不然虽然上传成功 但是不会有成功的小对勾 也不会回显 还有要求返回的图片地址的key 是url 这样才能正常回显图片


大功告成
上传文件配置也根图片一样 自己修改 不做展示了

初始化设置值

 // 组件初始化回显内容
    ueEditor.addListener("ready", () => {
      // ueEditor.setContent('<p style="line-height: 16px;"><img style="vertical-align: middle; margin-right: 2px;" src="/static/UE/dialogs/attachment/fileTypeImages/icon_jpg.gif"/><a style="font-size:12px; color:#0066cc;" href="http://60.22.46.138:8016/data/uploads/preview/default/file/2021/3/27/7129f03f3979995488f27ed4170cacd5/image/png/1616834022561ssp.png" title="1616834022561ssp.png">1616834022561ssp.png</a></p><p>asdasdasdask萨达卡健身打卡收到空间啊啥的<img src="http://img.baidu.com/hi/jx2/j_0015.gif"/><br/></p>');
    });

获取内容

/**获取内容 */
  const getContent = () => {
    console.log(UE,"ue",props.id)
    console.log(UE.getEditor(props.id).getContent(), '富文本内容')
    return UE.getEditor(props.id).getContent()
  }

基本上小demo完成了

有问题的小伙伴可以留言 这个很坑的编辑器

---