首先在官網(wǎng)上下載相關(guān)插件，但是有幾點(diǎn)需要改動(dòng)姻成，那我直接把我改好的貼出出來(lái)吧插龄，希望可以幫到大家。
然后在index.html頁(yè)面里引入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);
// 組件銷毀時(shí)候移除頁(yè)面中id的textarea
let tagElement = window.document.querySelector(`#ueditor-container`);
tagElement.parentElement.removeChild(tagElement);
// editor.removeListener(); //不要打開(kāi)佣渴，否則返回有問(wèn)題報(bào)錯(cuò)
};
}, []);
// 初始化編輯器
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); // 設(shè)置默認(rèn)值/表單回顯
}
});
editor.addListener('blur', function () {
setContent(editor.getContent());
});
};
// 暴露方法
useImperativeHandle(ref, () => ({
getUEContent: () => {
return editor.getContent(); // 獲取編輯器內(nèi)容
},
}));
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
})
// 富文本失焦就觸發(fā)setContent函數(shù)設(shè)置表單的content內(nèi)容
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
