나모웹에디터 React
React
index.js
import { useEffect, useRef, useState } from "react";
import StyledNamoEditor from "./styled";
export const NamoEditor = ({ src, sender, prntMessage }) => {
const [iframeValue, setIframeValue] = useState();
const [pageMode, setPageMode] = useState("V");
const iframeRef = useRef(null);
//iframe으로 메시지를 보낼 함수
const sendMessageToIframe = (_message) => {
const iframeWindow = iframeRef.current.contentWindow;
const message = { type: "GREETING", data: _message };
iframeWindow.postMessage(message, "*");
};
//iframe으로 보낼 메시지(state)를 채우는 함수
const onChangeValue = (e) => {
setIframeValue(e.target.value);
};
// iframe 로딩 완료 시 메시지 보내는 함수
const onIframeLoad = () => {
sendMessageToIframe(prntMessage);
};
//iframe에서 메시지를 받을 useEffect
useEffect(() => {
const receiveMessage = (event) => {
if (sender === event.data.sender) {
setIframeValue(event.data["targetNode"]);
}
};
window.addEventListener("message", receiveMessage);
return () => {
window.removeEventListener("message", receiveMessage);
};
}, []);
//PageMode(readonly : boolean)을 변경할 함수
const onChangePageMode = (_mode) => {
setPageMode(_mode);
};
//pageMode가 바뀌면 bool 값을 iFrame으로 내려주어
//iframe setReadOnly : boolean 값을 변경해준다
useEffect(() => {
if (pageMode === "V") {
const iframeWindow = iframeRef.current.contentWindow;
iframeWindow.postMessage({ type: "pageMode", bool: false }, "*");
} else if (pageMode === "E") {
const iframeWindow = iframeRef.current.contentWindow;
iframeWindow.postMessage({ type: "pageMode", bool: true }, "*");
}
}, [pageMode]);
//에디터 내용을 초기화 하는 함수
const onResetEditor = () => {
const iframeWindow = iframeRef.current.contentWindow;
const message = { type: "reset" };
iframeWindow.postMessage(message, "*");
};
return (
<StyledNamoEditor>
<div className="header">
{pageMode === "E" && (
<button onClick={() => onChangePageMode("V")}>사용자 모드 </button>
)}
{pageMode === "V" && (
<button onClick={() => onChangePageMode("E")}>관리자 모드 </button>
)}
<textarea onChange={onChangeValue} value={iframeValue}></textarea>
<button onClick={() => sendMessageToIframe(iframeValue)}>
내용 보내기
</button>
<button onClick={onResetEditor}>초기화</button>
</div>
<iframe src={src} id="namo" ref={iframeRef} onLoad={onIframeLoad} />
</StyledNamoEditor>
);
};
Namo
apache-tomcat-8.5.99/webapps/namo
index.html
...(중략)
function sendMessageToParent(message) {
window.parent.postMessage(message, "http://localhost:3100");
}
</script>
</head>
<body>
<textarea
id="pe_buZ"
name="pe_buZ"
alt="initText"
title="initText"
style="width: 730px; height: 450px; font-size: 10pt"
>
</textarea>
<script type="text/javascript" language="javascript">
var CrossEditor = new NamoSE("pe_buZ");
CrossEditor.params.Width = "100%";
CrossEditor.params.Height = "700px";
CrossEditor.params.UserLang = "auto";
CrossEditor.params.NewToolbar = true;
CrossEditor.params.FullScreen = false;
CrossEditor.EditorStart();
function CE_OnKeyActive(e) {
var message = {
targetNode: e.targetNode.textContent,
};
sendMessageToParent(message);
}
window.addEventListener("message", (event) => {
console.debug("addEventListener event", event.data);
if (event.origin !== "http://localhost:3100") {
return;
}
if (event.data.type === "GREETING") {
CrossEditor.SetBodyValue(event.data.data);
} else if (event.data.type === "pageMode") {
console.debug("CrossEditor", CrossEditor);
CrossEditor.SetReadonly(event.data.bool);
}
});
function OnInitCompleted(e) {
console.debug("OnInitComplete e", e);
e.editorTarget.SetBodyValue(
document.getElementById("pe_buZ").value
);
}
</script>
Be {Nice} Be {Kind}