전체 HTML 예제로 시작하기
코드를 HTML 파일에 붙여 넣고 인터넷에 연결된 브라우저에서 열어 보세요. 글을 쓴 뒤 버튼을 눌러 결과를 확인할 수 있습니다.
간단한 CDN 예제로 시작하기
이 HTML 파일을 열면 바로 글을 쓸 수 있는 편집기가 만들어집니다. 코드 강조와 수식이 필요하면 확장 예제를 사용하세요.
- HTML 파일 만들기
editor.html 파일을 만들고 전체 예제를 붙여 넣으세요.
- CDN에서 편집기 불러오기
script 주소로 SolidEdit를 불러옵니다. textarea에 처음 표시할 글을 넣고, mountContentEditor로 편집기를 만듭니다.
- 파일을 열고 글 쓰기
인터넷에 연결된 브라우저에서 editor.html을 여세요. 처음 표시할 글을 바꾸거나, 작은 편집기가 필요하면 toolbarSize를 mini로 지정하세요.
<!doctype html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>나의 첫 SolidEdit 문서</title>
</head>
<body>
<textarea id="documentBody" aria-label="직접 편집하는 예제 문서"><p>여기에 글을 써 보세요.</p></textarea>
<script>
window.CONTENT_EDITOR_AUTOSTART = false;
window.CONTENT_EDITOR_AUTOINIT = false;
</script>
<script src="https://cdn.jsdelivr.net/gh/statground/solid-edit@ba2b1a6097fa2c677d9a51499a9a5e332afe4fb5/versions/0.0.4/editor.js"
integrity="sha384-o1lxhgutT7T8DymtCkYZMTZogs02eQQ49iziFUhnjFTwe4XR8OWMyrzZAvy9wS7Q"
crossorigin="anonymous"></script>
<script>
const editor = window.mountContentEditor("#documentBody", {
lang: "ko",
storageKey: "my-solid-edit-document",
placeholder: "여기에 글을 써 보세요."
});
</script>
</body>
</html>전체 HTML 예제로 시작하기
<!doctype html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>나의 첫 SolidEdit 문서</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/statground/Statground_CDN@37c96a1a3f8f469e061b653485cabab668858df8/scripts_go/statground_go_20260531_1545/scripts3/toolbox/solid_edit/highlight_20260822_1631.css">
<style>
body { max-width: 960px; margin: 32px auto; padding: 0 20px; font-family: sans-serif; }
button { margin: 16px 8px 0 0; padding: 10px 16px; cursor: pointer; }
pre { padding: 16px; background: #f1f5f9; white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>나의 첫 SolidEdit 문서</h1>
<textarea id="documentBody" aria-label="직접 편집하는 예제 문서"><p>여기에 글을 써 보세요.</p></textarea>
<button id="readHTML" type="button">HTML 보기</button>
<button id="readMarkdown" type="button">Markdown 보기</button>
<pre id="output"></pre>
<script>
window.CONTENT_EDITOR_AUTOSTART = false;
window.CONTENT_EDITOR_AUTOINIT = false;
window.MathJax = {
tex: { inlineMath: [], displayMath: [["$$", "$$"]] },
svg: { fontCache: "global" },
startup: { typeset: false }
};
window.CONTENT_EDITOR_MATHJAX_CDN_URL = "https://cdn.jsdelivr.net/gh/mathjax/MathJax@600692ad9d3552cc25f85510d5797bc942ecc9f7/es5/tex-svg.js";
window.CONTENT_EDITOR_MATHJAX_BUNDLE_URL = "https://cdn.jsdelivr.net/gh/mathjax/MathJax@600692ad9d3552cc25f85510d5797bc942ecc9f7/es5/tex-svg.js";
window.CONTENT_EDITOR_HLJS_SCRIPT_SRC = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@91724c0adaf7bea7e5c5c85e4ea1d672f6c0ed23/build/highlight.min.js";
window.CONTENT_EDITOR_HLJS_STYLE_HREF = "https://cdn.jsdelivr.net/gh/statground/Statground_CDN@37c96a1a3f8f469e061b653485cabab668858df8/scripts_go/statground_go_20260531_1545/scripts3/toolbox/solid_edit/highlight_20260822_1631.css";
</script>
<script src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@600692ad9d3552cc25f85510d5797bc942ecc9f7/es5/tex-svg.js" integrity="sha384-KKWa9jJ1MZvssLeOoXG6FiOAZfAgmzsIIfw8BXwI9+kYm0lPCbC6yTQPBC00F1/L" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@91724c0adaf7bea7e5c5c85e4ea1d672f6c0ed23/build/highlight.min.js" integrity="sha384-RH2xi4eIQ/gjtbs9fUXM68sLSi99C7ZWBRX1vDrVv6GQXRibxXLbwO2NGZB74MbU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/statground/solid-edit@ba2b1a6097fa2c677d9a51499a9a5e332afe4fb5/versions/0.0.4/editor.js"
integrity="sha384-o1lxhgutT7T8DymtCkYZMTZogs02eQQ49iziFUhnjFTwe4XR8OWMyrzZAvy9wS7Q"
crossorigin="anonymous"></script>
<script>
const editor = window.mountContentEditor("#documentBody", {
lang: "ko",
storageKey: "my-solid-edit-document",
placeholder: "여기에 글을 써 보세요."
});
// 문서가 바뀌면 코드와 수식을 다시 표시합니다.
let renderTimer;
function refreshRenderers() {
clearTimeout(renderTimer);
renderTimer = setTimeout(() => {
editor.renderAllCodeBlocks();
const mathOutput = window.MathJax?.startup?.output;
if (mathOutput?.options && mathOutput.options.fontCache !== "none") {
mathOutput.options.fontCache = "none";
editor.renderAllMath(true);
}
}, 250);
}
["input", "change", "click", "keyup"].forEach(name => {
editor.root.addEventListener(name, refreshRenderers);
});
document.querySelector("#documentBody").addEventListener("input", refreshRenderers);
refreshRenderers();
window.addEventListener("pagehide", () => clearTimeout(renderTimer));
const output = document.querySelector("#output");
document.querySelector("#readHTML").addEventListener("click", () => {
output.textContent = editor.getHTML();
});
document.querySelector("#readMarkdown").addEventListener("click", () => {
output.textContent = editor.getMarkdown();
});
</script>
</body>
</html>내 웹사이트에 편집기 넣기
하려는 일을 펼치면 필요한 JavaScript 예제를 볼 수 있습니다. 전체 HTML 예제로 편집기를 만든 뒤 나머지 코드를 사용하세요.
입력란을 편집기로 바꾸기
페이지에 textarea를 넣고 라이브러리를 불러온 뒤 mountContentEditor를 실행하세요. 작은 도구 모음이 필요하면 toolbarSize를 mini로 지정합니다.
const editor = window.mountContentEditor("#documentBody", {
lang: "ko",
storageKey: "my-solid-edit-document",
placeholder: "여기에 글을 써 보세요."
});입력란이 문서 편집기로 바뀝니다. 반환된 editor로 내용을 읽거나 바꿀 수 있습니다.
HTML이나 Markdown으로 읽기
저장, 복사, 내보내기 버튼을 눌렀을 때 호출하세요. 두 메서드는 텍스트를 반환하며, 저장할 위치는 웹사이트에서 정합니다.
const html = editor.getHTML();
const markdown = editor.getMarkdown();
console.log(html);
console.log(markdown);HTML은 문서 서식을 유지하고, Markdown은 지원하는 요소를 텍스트 형식으로 바꿉니다.
다른 문서 불러오기
직접 관리하는 문서의 HTML을 setHTML에 전달하면 내용을 바꿀 수 있습니다. 저장하지 않은 글을 바꾸기 전에는 사용자에게 확인하세요.
editor.setHTML("<h2>다음 회의</h2><p>안건을 여기에 적어 주세요.</p>");새 문서가 편집기에 표시되고, 원래 입력란의 값도 함께 바뀝니다.
화면을 닫을 때 편집기 정리하기
필요한 내용을 먼저 읽어 둔 뒤 편집기를 제거하세요. 페이지 안의 화면이나 컴포넌트를 닫을 때 사용할 수 있습니다.
const finalHTML = editor.getHTML();
window.destroyLocalRichEditor(editor);편집 화면이 제거되고 원래 textarea를 다시 사용할 수 있습니다. 보관 중인 임시 문서는 삭제하지 않습니다.