미디어위키:Gadget-Excalidraw.js
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
// Excalidraw 임베딩 위젯
// 제작자 [[사용자:Senouis]]
// TODO: ScriptLoader 위젯에 아래 기능을 일임하고 이 위젯이 의존하도록 하기
function asyncJSLoader(url, type) { // UE4, Godot 등의 다른 스크립트 로딩 위젯들과 공유함
return new Promise(function (resolve, reject) {
try {
var scriptElement = document.createElement("script");
scriptElement.src = url;
scriptElement.async = true; // force asynchronous loading
scriptElement.type = type;
var contextsection = document.getElementById("mw-content-text");
scriptElement.addEventListener("load", function (ev) {
resolve({ status: true });
});
scriptElement.addEventListener("error", function (ev) {
reject({
status: false,
message: "Failed to load the script"
});
});
contextsection.appendChild(scriptElement);
} catch (e) {
reject(e);
}
});
}
function LoadExcalidraw(){
if (!document.getElementById("excalidraw-container")) return;
asyncJSLoader("https://unpkg.com/react@18.2.0/umd/react.development.js", "text/javascript").then(function (result) {
console.log("React 로딩 완료");
asyncJSLoader("https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js", "text/javascript").then( function(result) {
console.log("React DOM 로딩 완료");
asyncJSLoader("https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js", "text/javascript").then(function(result) {
console.log("Excalidraw 로딩 완료");
const App = function () {
return React.createElement(
React.Fragment,
null,
React.createElement(
"div",
{
style: { height: "500px" },
},
React.createElement(ExcalidrawLib.Excalidraw)
)
);
};
const excalidrawWrapper = document.getElementById("app");
const root = ReactDOM.createRoot(excalidrawWrapper);
root.render(React.createElement(App));
console.log("Excalidraw 로딩 완료!");
}).catch(function (e){
console.log("Excalidraw 스크립트 로딩 실패, 저장소에 연결할 수 없습니다.");
});
}).catch(function (e){
console.log("React DOM 라이브러리 로딩 실패, 저장소에 연결할 수 없습니다.");
});
}).catch(function (e){
console.log("React 라이브러리 로딩 실패, 저장소에 연결할 수 없습니다.");
});
}
LoadExcalidraw();