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

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

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

二次封装组件代码如下

/* 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 ;

};

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 (

id="container"

ref={ueRef}

config={config}

initData={editorText}

setContent={(e)=>setContent(e)}>

);

}

export default ContentModule;

image.png