react hook结合Ueditor实现富文本编辑器

首先在官网上下载相关插件，但是有几点需要改动，那我直接把我改好的贴出出来吧，希望可以帮到大家。

点击下载Ueditor

然后在index.html页面里引入js和css

    <!-- 百度富文本脚本 -->
    <script type="text/javascript" src="<%= context.config.publicPath +'ueditor/ueditor.config.js'%>"></script>
    <script type="text/javascript" src="<%= context.config.publicPath +'ueditor/ueditor.all.js'%>"></script>

二次封装组件代码如下

/* eslint-disable func-names */
/* eslint-disable prefer-const */
/* eslint-disable @typescript-eslint/no-use-before-define */
import React, { useEffect, useImperativeHandle, forwardRef } from 'react';

let editor = null;

const toolbars = [
  [
    'source',
    '|',
    'undo',
    'redo',
    '|',
    'bold',
    'italic',
    'underline',
    // 'fontborder',
    'strikethrough',
    'removeformat',
    // 'formatmatch',
    // 'autotypeset',
    'blockquote',
    // 'pasteplain',
    '|',
    'forecolor',
    'backcolor',
    'insertorderedlist',
    'insertunorderedlist',
    '|',
    'paragraph',
    'fontfamily',
    'fontsize',
    '|',
    'indent',
    'justifyleft',
    'justifycenter',
    'justifyright',
    'justifyjustify',
    '|',
    // 'touppercase', 'tolowercase', '|',
    'link',
    // 'unlink',
    '|',
    'imagenone',
    'imageleft',
    'imageright',
    'imagecenter',
    '|',
    'simpleupload',
    'insertimage',
    // '|',
    // 'horizontal',
    // 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
    // 'searchreplace'
  ],
];

function UEditor(props, ref){
  useEffect(() => {
    if (window.UE.getEditor) {
      setConfig(props.initData, props.config, props.setContent);
    }
    
    return () => {
      editor.destroy(props.id);
      // 组件销毁时候移除页面中id的textarea
      let tagElement = window.document.querySelector(`#ueditor-container`);
      tagElement.parentElement.removeChild(tagElement);
      // editor.removeListener(); //不要打开，否则返回有问题报错
    };
  }, []);


  // 初始化编辑器
  const setConfig = (initData, config, setContent) => {
    editor =
      window.UE &&
      window.UE.getEditor('ueditor-container', {
        toolbars,
        // enableAutoSave: false,
        maximumWords: 1000000,
        scaleEnabled: false,
        autoFloatEnabled: false,
        autoHeightEnabled: false,
        initialFrameHeight: (config && config.initialFrameHeight) || 450,
        initialFrameWidth: (config && config.initialFrameWidth) || '100%',
        zIndex: 1,
      }
    );
    editor.ready(() => {
      if (initData) {
        editor.setContent(initData); // 设置默认值/表单回显
      }
    });
    editor.addListener('blur', function () {
      setContent(editor.getContent());
    });
  };

  // 暴露方法
  useImperativeHandle(ref, () => ({
    getUEContent: () => {
      return editor.getContent(); // 获取编辑器内容
    },
  }));


  return <script id="ueditor-container" type="text/plain" />;
};

export default forwardRef(UEditor);

具体使用方法

/* eslint-disable react/no-danger */
/* eslint-disable import/no-unresolved */
/* eslint-disable consistent-return */
/* eslint-disable no-eval */
/* eslint-disable no-param-reassign */
/* eslint-disable array-callback-return */
/* eslint-disable react/self-closing-comp */
import React, {useState, useRef} from 'react';
import Ueditor from '@components/Editor/index2.js';
import styles from './contentModule.less';

function ContentModule(props) {
  const {
    editorText = '', 
    setEditorText= ()=>{},
  } = props;

  const ueRef = useRef(null)

  const [config] = useState({
    initialFrameWidth: '100%',
    initialFrameHeight: 400
  })
  
  // 富文本失焦就触发setContent函数设置表单的content内容
  const setContent = (content)=>{
    setEditorText(content);
  }

  return (
    <div className={styles.ueditor}>
      <Ueditor 
        id="container" 
        ref={ueRef} 
        config={config} 
        initData={editorText} 
        setContent={(e)=>setContent(e)}>
        </Ueditor>
    </div>
  );
}

export default ContentModule;

image.png