里面坑比較多，細(xì)節(jié)也比較多
以下使用的是react 18 + ice3.0，使用其他react腳手架的配置基本相同，例如umi4
1.下載UEditor
進(jìn)入U(xiǎn)Editor倉(cāng)庫(kù)，找到版本v1.4.3.3，點(diǎn)擊進(jìn)去
接著下載ueditor1_4_3_3-utf8-jsp.zip版本
下載好以后開(kāi)始安裝依賴：npm install ，依賴安裝完成后就可以打包了，最終我們項(xiàng)目要的就是這個(gè)打包后的文件。
打包需要使用grunt:
- 全局安裝
npm install -g grunt-cli - 在項(xiàng)目ueditor中安裝grunt依賴,
npm install grunt --save-dev - 在項(xiàng)目ueditor輸入指令
grunt default來(lái)生成一個(gè)dist文件
2.react項(xiàng)目配置UEditor
復(fù)制dist\utf8-php下的所有文件到react項(xiàng)目中的public\editor\ueditor下面（沒(méi)有這個(gè)目錄就新建一個(gè)）。
如下，注意標(biāo)黃的文件是后面步驟加上的，沒(méi)有這個(gè)文件是正常的：
接著引入U(xiǎn)Editor
找到src\document.tsx文件，就這個(gè)文件就相當(dāng)于其他項(xiàng)目中的index.html，具體使用參考document定制html,在這里引入U(xiǎn)Editor，我們的文件存放的地址在public下面，這里寫(xiě)路徑的時(shí)候不用寫(xiě)public，直接從editor開(kāi)始寫(xiě)，/editor/ueditor/ueditor.config.js和/editor/ueditor/ueditor.all.js
注意?。∪绻憔庉嬈鲌?bào)錯(cuò)，放開(kāi)下面兩個(gè)注釋的文件
3.react組件引入U(xiǎn)Editor
新建src\components\ReactUeditor文件夾，分別以下幾個(gè)文件
index.tsx
import React, { useEffect, useImperativeHandle, forwardRef } from "react";
let editor: any = null;
function UEditor(props, ref) {
useEffect(() => {
if (window.UE.getEditor) {
setConfig(props.initData, props.config, props.setContent);
}
return () => {
editor.destroy(props.id);
// 組件銷(xiāo)毀時(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);
頁(yè)面組件引入
import ReactUeditor from "@/components/ReactUeditor";
<Form.Item name="contents">
<ReactUeditor onChange={onChange}
autoFloatEnabled={type !== "detail" ? true : false}
initData={initData}
setContent={(val) => console.log(val)}></ReactUeditor>
</Form.Item>
這個(gè)時(shí)候就能看到效果了
4.接入秀米
參考地址
引入秀米圖標(biāo)和樣式
xiumi-ue-dialog-v5.js
/**
* Created by shunchen_yang on 16/10/25.
*/
UE.registerUI("dialog", function (editor, uiName) {
var btn = new UE.ui.Button({
name: "/* xiumi-connect */",
title: "秀米",
onclick: function () {
var dialog = new UE.ui.Dialog({
iframeUrl: "/editor/ueditor/xiumi-ue-dialog-v5.html",
editor: editor,
name: "xiumi-connect",
title: "秀米圖文消息助手",
cssRules:
"width: " +
(window.innerWidth - 80) +
"px;" +
"height: " +
(window.innerHeight - 280) +
"px;z-index:100000",
});
dialog.render();
dialog.open();
},
});
return btn;
});
xiumi-ue-v5.css
.edui-button.edui-for-xiumi-connect .edui-button-wrap .edui-button-body .edui-icon {
background-image: url("./xiumi-connect-icon.png") !important;
background-size: contain;
}
通過(guò)iframe 嵌入秀米
internal.js
(function () {
var parent = window.parent;
//dialog對(duì)象
dialog = parent.$EDITORUI[window.frameElement.id.replace(/_iframe$/, "")];
//當(dāng)前打開(kāi)dialog的編輯器實(shí)例
editor = dialog.editor;
UE = parent.UE;
domUtils = UE.dom.domUtils;
utils = UE.utils;
browser = UE.browser;
ajax = UE.ajax;
$G = function (id) {
return document.getElementById(id);
};
//focus元素
$focus = function (node) {
setTimeout(function () {
if (browser.ie) {
var r = node.createTextRange();
r.collapse(false);
r.select();
} else {
node.focus();
}
}, 0);
};
utils.loadFile(document, {
href:
editor.options.themePath +
editor.options.theme +
"/dialogbase.css?cache=" +
Math.random(),
tag: "link",
type: "text/css",
rel: "stylesheet",
});
lang = editor.getLang(dialog.className.split("-")[2]);
if (lang) {
domUtils.on(window, "load", function () {
var langImgPath =
editor.options.langPath + editor.options.lang + "/images/";
//針對(duì)靜態(tài)資源
for (var i in lang["static"]) {
var dom = $G(i);
if (!dom) continue;
var tagName = dom.tagName,
content = lang["static"][i];
if (content.src) {
//clone
content = utils.extend({}, content, false);
content.src = langImgPath + content.src;
}
if (content.style) {
content = utils.extend({}, content, false);
content.style = content.style.replace(
/url\s*\(/g,
"url(" + langImgPath
);
}
switch (tagName.toLowerCase()) {
case "var":
dom.parentNode.replaceChild(document.createTextNode(content), dom);
break;
case "select":
var ops = dom.options;
for (var j = 0, oj; (oj = ops[j]); ) {
oj.innerHTML = content.options[j++];
}
for (var p in content) {
p != "options" && dom.setAttribute(p, content[p]);
}
break;
default:
domUtils.setAttributes(dom, content);
}
}
});
}
})();
xiumi-ue-dialog-v5.html文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-836197.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XIUMI connect</title>
<style>
html,
body {
padding: 0;
margin: 0;
}
#xiumi {
position: absolute;
width: 100%;
height: 100%;
border: none;
box-sizing: border-box;
}
</style>
</head>
<body>
<iframe id="xiumi" src="https://xiumi.us/studio/v5#/paper">
</iframe>
<script type="text/javascript" src="dialogs/internal.js"></script>
<script>
var xiumi = document.getElementById('xiumi');
var xiumi_url = "https://xiumi.us";
console.log("xiumi_url is %o", xiumi_url);
xiumi.onload = function () {
console.log("postMessage to %o", xiumi_url);
// "XIUMI:3rdEditor:Connect" 是特定標(biāo)識(shí)符，不能修改，大小寫(xiě)敏感
xiumi.contentWindow.postMessage('XIUMI:3rdEditor:Connect', xiumi_url);
};
document.addEventListener("mousewheel", function (event) {
event.preventDefault();
event.stopPropagation();
});
window.addEventListener('message', function (event) {
console.log("Received message from xiumi, origin: %o %o", event.origin, xiumi_url);
if (event.origin == xiumi_url) {
console.log("Inserting html");
editor.execCommand('insertHtml', event.data);
console.log("Xiumi dialog is closing");
dialog.close();
}
}, false);
</script>
</body>
</html>
將注冊(cè)的圖標(biāo)添加到編輯器中
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-836197.html
到了這里，關(guān)于react hook使用UEditor引入秀米圖文排版的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
