글 작성 에디터(HTML)를 올려드립니다.

벗님 (61.♡.153.123)

2026년 3월 7일 PM 12:38

조회 3,527 공감 0

새로 리뉴얼된 UI의 편집기에서는

글을 HTML으로 편집해서 올리는 게 쉽지 않아서,

Claude를 이용해서 간단하게 HTML Editor를 만들어 봤습니다.

이 편집기에서 글을 쓰고,

'HTML 코드'를 다모앙 글쓰기 창에서 붙여넣기하는 방식으로 사용하는데,

이 편집기에서 설정한 모든 CSS가 모두 적용되는 것은 아니지만,

행 분할, 이미지 첨부, 표 삽이 등등.. 어느 정도는 가능합니다.

현재 다모앙 글쓰기 에디터의 HTML 편집은 보기도 어렵고 해서,

이 HTML Editor에서 글을 완성한 후에 옮기는 방식으로 하고 있습니다.

이 파일은 단일한 html 파일로,

브라우저에서 이 파일을 열어서 사용하시면 됩니다.

왼쪽의 '미리보기' 창에서도 편집이 가능하고,

오른쪽의 'HTML 소스' 창에서도 편집이 가능합니다.

원래는 파일을 올려드리려고 했는데,

아직은 '파일 첨부' 기능이 정상작동하지 않아서,

아래 원본 HTML 코드를 그대로 올려드립니다.

복사해서 'HtmlEditor_v0.93.html'로 저장하신 후,

브라우저에서 열어서 사용하시면 됩니다.

<!DOCTYPE html>

<head>

<title>HTML Live Editor Pro</title>

<style>

*{margin:0;padding:0;box-sizing:border-box;}

:root{

--bg:#1a1b2e;--bar:#12131f;--border:#2a2d4a;--accent:#4f8ef7;

--text:#e2e4f0;--text2:#8890b0;

--tb-hover:#2a2d4a;--tb-active:#3a4060;

--sep:#2e3150;--shadow:0 4px 24px rgba(0,0,0,0.4);

}

body{display:flex;flex-direction:column;height:100vh;background:var(--bg);font-family:'Noto Sans KR',sans-serif;overflow:hidden;color:var(--text);}

#app-header{

display:flex;align-items:center;justify-content:space-between;

padding:0 18px;height:50px;background:var(--bar);

border-bottom:1px solid var(--border);flex-shrink:0;

box-shadow:var(--shadow);z-index:20;

}

.app-dots{display:flex;gap:7px;align-items:center;}

.dot{width:12px;height:12px;border-radius:50%;}

.dot-r{background:#ff5f57;}.dot-y{background:#ffbd2e;}.dot-g{background:#28ca41;}

.app-title{font-size:13px;font-weight:700;color:var(--text2);letter-spacing:1px;text-transform:uppercase;margin-left:12px;}

.hdr-btns{display:flex;gap:8px;}

.hdr-btn{padding:6px 16px;border-radius:6px;border:none;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s;letter-spacing:.5px;}

#btn-reset{background:transparent;border:1px solid var(--border);color:var(--text2);}

#btn-reset:hover{background:var(--tb-hover);color:var(--text);}

#btn-copy{background:var(--accent);color:#fff;box-shadow:0 2px 12px rgba(79,142,247,.35);}

#btn-copy:hover{background:#3a7ae8;}

#btn-copy.ok{background:#22c55e;}

#panel-labels{display:flex;background:var(--bar);border-bottom:1px solid var(--border);flex-shrink:0;}

.plabel{padding:5px 16px;font-size:10px;color:var(--text2);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}

#lbl-pre{border-right:1px solid var(--border);}

#main{display:flex;flex:1;overflow:hidden;position:relative;}

#preview-panel{display:flex;flex-direction:column;background:#fff;flex-shrink:0;overflow:hidden;}

#rte-toolbar{

background:#f0f2f7;border-bottom:2px solid #d4d8e8;

flex-shrink:0;user-select:none;

}

.tb-row{

display:flex;flex-wrap:wrap;align-items:center;

gap:1px;padding:4px 8px;

border-bottom:1px solid #dde0ee;

}

.tb-row:last-child{border-bottom:none;}

.tb{

display:inline-flex;align-items:center;justify-content:center;

min-width:28px;height:26px;padding:0 5px;

background:transparent;border:1px solid transparent;

border-radius:4px;cursor:pointer;font-size:12px;

font-family:'Noto Sans KR',sans-serif;color:#2c3354;

transition:all .15s;white-space:nowrap;gap:3px;

}

.tb:hover{background:#dde3f0;border-color:#b8c0d8;}

.tb.on{background:#c5d3f0;border-color:#4f8ef7;color:#1a3a8f;}

.tb svg{width:14px;height:14px;fill:currentColor;pointer-events:none;flex-shrink:0;}

.tb-sep{width:1px;height:20px;background:#cdd0e0;margin:0 3px;flex-shrink:0;}

.tb-sel{

height:26px;padding:0 6px;font-size:11.5px;

border:1px solid #c8cce0;border-radius:4px;

background:#fff;color:#2c3354;cursor:pointer;

font-family:inherit;

}

.tb-sel:focus{outline:none;border-color:var(--accent);}

.color-wrap{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:28px;height:26px;cursor:pointer;border:1px solid transparent;border-radius:4px;transition:all .15s;}

.color-wrap:hover{background:#dde3f0;border-color:#b8c0d8;}

.color-wrap input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0;}

.color-label{font-size:12px;font-weight:800;pointer-events:none;line-height:1;}

.color-bar{width:18px;height:3px;border-radius:2px;pointer-events:none;margin-top:2px;}

.tb-group{display:inline-flex;border:1px solid #c8cce0;border-radius:5px;overflow:hidden;}

.tb-group .tb{border-radius:0;border:none;border-right:1px solid #c8cce0;}

.tb-group .tb:last-child{border-right:none;}

.tb-group .tb.on{background:#c5d3f0;}

#rte-body{

flex:1;overflow-y:auto;padding:24px 28px;

outline:none;line-height:1.85;font-family:'Noto Sans KR',sans-serif;

font-size:15px;color:#1a1a2e;background:#fff;

caret-color:#4f8ef7;

}

#rte-body:focus{box-shadow:inset 0 0 0 2px rgba(79,142,247,.2);}

#rte-body h1{font-size:2em;color:#1a1a2e;margin:.5em 0 .25em;}

#rte-body h2{font-size:1.5em;color:#2c3354;margin:.5em 0 .25em;}

#rte-body h3{font-size:1.25em;color:#2c3354;margin:.5em 0 .25em;}

#rte-body h4,#rte-body h5,#rte-body h6{color:#3a4060;}

#rte-body blockquote{border-left:4px solid #4f8ef7;margin:1em 0;padding:10px 18px;background:#f0f5ff;color:#3a4060;border-radius:0 8px 8px 0;}

#rte-body pre{background:#1a1b2e;color:#cdd6f4;padding:16px 20px;border-radius:8px;overflow-x:auto;font-size:13px;font-family:'Courier New',monospace;margin:1em 0;}

#rte-body code{background:#e8ecf8;color:#2c3354;padding:2px 6px;border-radius:4px;font-size:.9em;font-family:'Courier New',monospace;}

#rte-body table{border-collapse:collapse;width:100%;margin:1em 0;font-size:14px;}

#rte-body th,#rte-body td{border:1px solid #c8cce0;padding:8px 12px;}

#rte-body th{background:#eef1fb;font-weight:700;color:#2c3354;}

#rte-body tr:nth-child(even) td{background:#f8f9fd;}

#rte-body hr{border:none;border-top:2px solid #d4d8e8;margin:1.2em 0;}

#rte-body a{color:#4f8ef7;text-decoration:underline;}

#rte-body img{max-width:100%;border-radius:6px;}

#rte-body ul,#rte-body ol{margin:.5em 0 .5em 1.8em;}

#rte-body li{margin:.2em 0;}

#rte-body ul.checklist{list-style:none;margin-left:.5em;}

#rte-body ul.checklist li{display:flex;align-items:flex-start;gap:8px;}

#rte-body ul.checklist li input{margin-top:4px;accent-color:#4f8ef7;}

#divider{

width:6px;background:#1a1b2e;cursor:col-resize;flex-shrink:0;

transition:background .2s;z-index:10;

display:flex;align-items:center;justify-content:center;

}

#divider:hover,#divider.on{background:#4f8ef7;}

#div-dots{display:flex;flex-direction:column;gap:4px;}

.dd{width:2px;height:8px;background:#3a4060;border-radius:1px;}

#editor-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#1a1b2e;}

#code-editor{

flex:1;background:#1a1b2e;color:#cdd6f4;border:none;outline:none;

padding:20px;font-size:13px;font-family:'Courier New','Monaco',monospace;

line-height:1.7;resize:none;tab-size:2;

white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;

}

#statusbar{

display:flex;align-items:center;justify-content:space-between;

padding:0 16px;height:26px;background:var(--accent);flex-shrink:0;

}

.stext{color:#fff;font-size:11px;font-weight:600;}

#drag-overlay{display:none;position:absolute;inset:0;cursor:col-resize;z-index:100;}

#drag-overlay.on{display:block;}

.popup-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center;}

.popup-bg.open{display:flex;}

.popup{background:#fff;border-radius:10px;padding:24px;min-width:360px;box-shadow:0 8px 40px rgba(0,0,0,.3);}

.popup h3{font-size:16px;font-weight:700;color:#1a1a2e;margin-bottom:16px;}

.popup label{font-size:13px;color:#3a4060;font-weight:600;display:block;margin-bottom:4px;}

.popup input,.popup select{width:100%;padding:8px 12px;border:1px solid #c8cce0;border-radius:6px;font-size:13px;font-family:inherit;outline:none;margin-bottom:12px;color:#1a1a2e;}

.popup input:focus{border-color:#4f8ef7;}

.popup-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;}

.pop-ok{background:#4f8ef7;color:#fff;border:none;padding:8px 20px;border-radius:6px;font-weight:700;cursor:pointer;font-family:inherit;}

.pop-ok:hover{background:#3a7ae8;}

.pop-cancel{background:transparent;color:#666;border:1px solid #ccc;padding:8px 20px;border-radius:6px;font-weight:600;cursor:pointer;font-family:inherit;}

#find-panel{

display:none;position:absolute;top:8px;right:8px;

background:#fff;border:1px solid #c8cce0;border-radius:8px;

padding:12px 14px;z-index:50;box-shadow:0 4px 20px rgba(0,0,0,.15);min-width:300px;

}

#find-panel.open{display:block;}

#find-panel label{font-size:11px;color:#555;font-weight:600;display:block;margin-bottom:3px;}

#find-panel input{width:100%;padding:5px 8px;border:1px solid #c8cce0;border-radius:5px;font-size:12px;font-family:inherit;outline:none;margin-bottom:8px;}

#find-panel input:focus{border-color:#4f8ef7;}

.find-row{display:flex;gap:6px;margin-top:4px;}

.find-btn{padding:5px 10px;border:none;border-radius:5px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;}

.find-btn.pri{background:#4f8ef7;color:#fff;}

.find-btn.sec{background:#eef1fb;color:#2c3354;border:1px solid #c8cce0;}

.find-close{position:absolute;top:8px;right:8px;background:none;border:none;font-size:16px;cursor:pointer;color:#888;line-height:1;}

</style>

</head>

<body>

</div>

<span class="app-title">HTML Live Editor Pro</span>

</div>

</div>

</div>

</select>

<option value="Arial">Arial</option><option value="Georgia">Georgia</option>

<option value="Times New Roman">Times New Roman</option><option value="Courier New">Courier New</option>

<option value="Verdana">Verdana</option><option value="Trebuchet MS">Trebuchet MS</option>

</select>

</select>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="stext">HTML Live Editor Pro</span>

</div>

</div>

</div>

</div>

</div>

/* ── 초기 콘텐츠 ── */

const INIT = `<h1>HTML Live Editor Pro</h1>

<p>위의 서식 툴바로 텍스트를 꾸미거나, 오른쪽 코드 에디터에서 직접 수정해보세요.</p>

<blockquote>양방향 동기화: 미리보기를 편집하면 코드가, 코드를 편집하면 미리보기가 즉시 반영됩니다.</blockquote>

<p>텍스트를 선택한 뒤 툴바의 버튼을 눌러보세요. <strong>굵게</strong>, <em>기울임</em>, <u>밑줄</u>, <s>취소선</s> 등을 적용할 수 있습니다.</p>

<table><tr><th>항목</th><th>내용</th><th>비고</th></tr><tr><td>예시 1</td><td>내용 A</td><td>비고 A</td></tr><tr><td>예시 2</td><td>내용 B</td><td>비고 B</td></tr></table>`;

/* ── DOM ── */

const rte = document.getElementById('rte-body');

const ce = document.getElementById('code-editor');

const stInfo = document.getElementById('st-info');

const btnCopy = document.getElementById('btn-copy');

const btnRst = document.getElementById('btn-reset');

const divEl = document.getElementById('divider');

const prePane = document.getElementById('preview-panel');

const lbl = document.getElementById('lbl-pre');

const mainEl = document.getElementById('main');

const dragOvl = document.getElementById('drag-overlay');

let lock=false, srcMode=false;

/* ══════════════════════════════════════════════

HTML 포매터 (핵심 기능)

- 태그별로 줄바꿈 + 들여쓰기 적용

══════════════════════════════════════════════ */

function formatHTML(html) {

const INLINE = new Set(['a','abbr','acronym','b','bdo','big','br','button','cite',

'code','dfn','em','i','img','input','kbd','label','map','object','output',

'q','samp','select','small','span','strong','sub','sup','textarea','time',

'tt','u','var']);

// 1. 한 줄로 압축

let str = html

.replace(/\r\n|\r|\n/g, ' ')

.replace(/\s{2,}/g, ' ')

.trim();

// 2. 태그 앞뒤 공백 정규화

str = str

.replace(/> </g, '>\n<')

.replace(/></g, '>\n<');

// 3. 들여쓰기 적용

const lines = str.split('\n');

let indent = 0;

const PAD = ' '; // 들여쓰기 단위: 공백 2칸

const result = [];

for (let raw of lines) {

const line = raw.trim();

if (!line) continue;

// 닫는 태그 → 들여쓰기 감소 후 출력

const closeMatch = line.match(/^<\/([a-zA-Z0-9]+)/);

if (closeMatch) {

const tag = closeMatch[1].toLowerCase();

if (!INLINE.has(tag)) indent = Math.max(0, indent - 1);

}

result.push(PAD.repeat(indent) + line);

// 여는 태그 → 들여쓰기 증가 (self-closing, doctype, 주석 제외)

const openMatch = line.match(/^<([a-zA-Z0-9]+)([^>]*)>/);

if (openMatch) {

const tag = openMatch[1].toLowerCase();

const attr = openMatch[2];

const selfClose = /\/>$/.test(line) ||

['area','base','br','col','embed','hr','img','input',

'link','meta','param','source','track','wbr'].includes(tag);

const hasClose = line.includes('</' + tag + '>');

if (!selfClose && !hasClose && !INLINE.has(tag)) indent++;

}

return result.join('\n');

}

/* ── HTML 빌드 ── */

function buildHTML(body) {

const formatted = formatHTML(body);

return `<!DOCTYPE html>

<head>

<style>

body { font-family: 'Noto Sans KR', sans-serif; padding: 24px 28px; background: #fff; color: #1a1a2e; line-height: 1.85; font-size: 15px; }

h1 { font-size: 2em; color: #1a1a2e; margin: .5em 0 .25em; }

h2 { font-size: 1.5em; color: #2c3354; margin: .5em 0 .25em; }

h3 { font-size: 1.25em; color: #2c3354; margin: .4em 0 .2em; }

h4, h5, h6 { color: #3a4060; margin: .3em 0 .15em; }

p { margin: .5em 0; }

ul, ol { margin: .5em 0 .5em 1.8em; }

li { margin: .2em 0; }

blockquote { border-left: 4px solid #4f8ef7; margin: 1em 0; padding: 10px 18px; background: #f0f5ff; color: #3a4060; border-radius: 0 8px 8px 0; }

pre { background: #1a1b2e; color: #cdd6f4; padding: 16px 20px; border-radius: 8px; overflow-x: auto; font-size: 13px; font-family: 'Courier New', monospace; }

code { background: #e8ecf8; color: #2c3354; padding: 2px 6px; border-radius: 4px; font-size: .9em; font-family: 'Courier New', monospace; }

table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 14px; }

th, td { border: 1px solid #c8cce0; padding: 8px 12px; }

th { background: #eef1fb; font-weight: 700; }

tr:nth-child(even) td { background: #f8f9fd; }

hr { border: none; border-top: 2px solid #d4d8e8; margin: 1.2em 0; }

a { color: #4f8ef7; text-decoration: underline; }

img { max-width: 100%; border-radius: 6px; }

</style>

</head>

<body>

${formatted}

</body>

</html>`;

}

function extractBody(html) {

const m = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);

return m ? m[1].trim() : html;

}

/* ── 동기화 ── */

function rteToCode() {

if (lock) return;

lock = true;

ce.value = buildHTML(rte.innerHTML);

updateStatus();

lock = false;

}

let cTimer = null;

function codeToRte() {

if (lock) return;

clearTimeout(cTimer);

cTimer = setTimeout(() => {

lock = true;

rte.innerHTML = extractBody(ce.value);

updateStatus();

lock = false;

}, 350);

}

rte.addEventListener('input', rteToCode);

rte.addEventListener('keyup', updateTbState);

rte.addEventListener('mouseup', updateTbState);

ce.addEventListener('input', () => { codeToRte(); updateStatus(); });

ce.addEventListener('keydown', e => {

if (e.key === 'Tab') {

e.preventDefault();

const s = ce.selectionStart, en = ce.selectionEnd;

ce.value = ce.value.substring(0, s) + ' ' + ce.value.substring(en);

ce.selectionStart = ce.selectionEnd = s + 2;

}

});

/* ── execCommand 래퍼 ── */

function x(cmd, val) {

rte.focus();

document.execCommand(cmd, false, val || null);

rteToCode(); updateTbState();

}

function applyBlock(tag) {

rte.focus();

document.execCommand('formatBlock', false, '<' + tag + '>');

rteToCode();

}

function applyFontSize(px) {

rte.focus();

const sel = window.getSelection();

if (!sel.rangeCount) return;

const range = sel.getRangeAt(0);

if (!range.collapsed) {

const span = document.createElement('span');

span.style.fontSize = px + 'px';

try { range.surroundContents(span); } catch(e) { document.execCommand('fontSize',false,'3'); }

rteToCode();

}

function applyForeColor(v) { document.getElementById('fc-bar').style.background = v; x('foreColor', v); }

function applyBgColor(v) { document.getElementById('bg-bar').style.background = v; x('hiliteColor', v); }

function toggleSup() {

if (document.queryCommandState('superscript')) x('superscript');

else { document.execCommand('subscript',false,null); x('superscript'); }

}

function toggleSub() {

if (document.queryCommandState('subscript')) x('subscript');

else { document.execCommand('superscript',false,null); x('subscript'); }

}

function insertChecklist() {

rte.focus();

document.execCommand('insertHTML', false,

'<ul class="checklist"><li><input type="checkbox"> 항목 1</li><li><input type="checkbox"> 항목 2</li></ul>');

rteToCode();

}

function insertDateTime() {

const n = new Date();

const s = n.getFullYear()+'년 '+(n.getMonth()+1)+'월 '+n.getDate()+'일 '+

String(n.getHours()).padStart(2,'0')+':'+String(n.getMinutes()).padStart(2,'0');

document.execCommand('insertHTML', false, '<span>'+s+'</span>');

rteToCode();

}

function triggerUpload() { document.getElementById('img-upload').click(); }

function handleUpload(e) {

const f = e.target.files[0]; if (!f) return;

const r = new FileReader();

r.onload = ev => { rte.focus(); document.execCommand('insertImage', false, ev.target.result); rteToCode(); };

r.readAsDataURL(f);

}

function toggleSource() {

srcMode = !srcMode;

document.getElementById('tb-src').classList.toggle('on', srcMode);

if (srcMode) {

const pre = document.createElement('pre');

pre.id = 'src-view';

pre.style.cssText = 'flex:1;overflow:auto;padding:20px;font-size:12px;background:#f0f2f8;color:#1a1a2e;white-space:pre;word-break:break-all;border:2px dashed #4f8ef7;';

pre.textContent = formatHTML(rte.innerHTML);

rte.style.display = 'none';

rte.parentNode.insertBefore(pre, rte.nextSibling);

} else {

const sv = document.getElementById('src-view');

if (sv) sv.remove();

rte.style.display = '';

rte.focus();

}

function printContent() {

const w = window.open('', '_print', 'width=800,height=600');

w.document.write(buildHTML(rte.innerHTML));

w.document.close(); w.focus(); w.print(); w.close();

}

function toggleFullscreen() {

if (!document.fullscreenElement) {

document.documentElement.requestFullscreen();

document.getElementById('tb-full').classList.add('on');

} else {

document.exitFullscreen();

document.getElementById('tb-full').classList.remove('on');

}

/* ── 찾기/바꾸기 ── */

function toggleFind() {

const p = document.getElementById('find-panel');

p.classList.toggle('open');

if (p.classList.contains('open')) document.getElementById('find-input').focus();

}

function findNext() { window.find(document.getElementById('find-input').value, false, false, true); }

function findPrev() { window.find(document.getElementById('find-input').value, false, true, true); }

function replaceOne() {

const fv = document.getElementById('find-input').value;

const rv = document.getElementById('replace-input').value;

if (!fv) return;

if (window.find(fv, false, false, true)) { document.execCommand('insertText', false, rv); rteToCode(); }

}

function replaceAll() {

const fv = document.getElementById('find-input').value;

const rv = document.getElementById('replace-input').value;

if (!fv) return;

rte.innerHTML = rte.innerHTML.split(fv).join(rv);

rteToCode();

alert('모두 바꾸기 완료');

}

/* ── 팝업 ── */

function openPopup(id) { document.getElementById(id).classList.add('open'); }

function closePopup(id) { document.getElementById(id).classList.remove('open'); }

document.querySelectorAll('.popup-bg').forEach(bg => {

bg.addEventListener('click', e => { if (e.target === bg) bg.classList.remove('open'); });

});

function openLinkPopup() {

document.getElementById('link-text').value = window.getSelection().toString() || '';

document.getElementById('link-url').value = 'https://';

openPopup('link-popup');

setTimeout(() => document.getElementById('link-url').focus(), 100);

}

function doInsertLink() {

const url = document.getElementById('link-url').value.trim();

const txt = document.getElementById('link-text').value.trim();

const tgt = document.getElementById('link-target').value;

if (!url) { alert('URL을 입력해주세요.'); return; }

rte.focus();

document.execCommand('insertHTML', false,

`<a href="${url}"${tgt ? ' target="'+tgt+'" rel="noopener"' : ''}>${txt || url}</a>`);

closePopup('link-popup'); rteToCode();

}

function openImgPopup() {

document.getElementById('img-url').value = 'https://';

document.getElementById('img-alt').value = '';

document.getElementById('img-width').value = '';

openPopup('img-popup');

setTimeout(() => document.getElementById('img-url').focus(), 100);

}

function doInsertImg() {

const url = document.getElementById('img-url').value.trim();

const alt = document.getElementById('img-alt').value.trim();

const w = document.getElementById('img-width').value.trim();

if (!url) { alert('이미지 URL을 입력해주세요.'); return; }

rte.focus();

document.execCommand('insertHTML', false,

`<img src="${url}" alt="${alt}" style="${w ? 'width:'+w+'px' : 'max-width:100%'}">`);

closePopup('img-popup'); rteToCode();

}

function openTablePopup() { openPopup('table-popup'); }

function doInsertTable() {

const rows = parseInt(document.getElementById('tbl-rows').value) || 3;

const cols = parseInt(document.getElementById('tbl-cols').value) || 3;

const style = document.getElementById('tbl-style').value;

let t = '<table style="border-collapse:collapse;width:100%;margin:1em 0;font-size:14px;">';

for (let r = 0; r < rows; r++) {

t += '<tr>';

for (let c = 0; c < cols; c++) {

const td = 'border:1px solid #c8cce0;padding:8px 12px;';

if (r === 0) t += `<th style="${td}background:#eef1fb;font-weight:700;">머리글 ${c+1}</th>`;

else {

const bg = (style === 'stripe' && r % 2 === 0) ? 'background:#f8f9fd;' : '';

t += `<td style="${td}${bg}">내용</td>`;

}

t += '</tr>';

}

t += '</table>';

rte.focus();

document.execCommand('insertHTML', false, t);

closePopup('table-popup'); rteToCode();

}

'←','→','↑','↓','↔','⇐','⇒','⇑','⇓','⇔','≈','≠','≤','≥','±','×','÷',

'√','∞','∑','∏','∫','α','β','γ','δ','π','σ','Ω','μ','°','′','″',

'¼','½','¾','⅓','⅔','①','②','③','④','⑤','☆','★','♠','♣','♥','♦',

'♪','♫','☀','☁','☂','☃','✓','✗','❤','☎','✉','⚡'];

function openSpecialPopup() {

const grid = document.getElementById('special-grid');

if (!grid.children.length) {

SPECIALS.forEach(ch => {

const b = document.createElement('button');

b.className = 'tb'; b.style.fontSize = '16px'; b.textContent = ch; b.title = ch;

b.onclick = () => { rte.focus(); document.execCommand('insertText', false, ch); rteToCode(); };

grid.appendChild(b);

});

}

openPopup('special-popup');

}

/* ── 툴바 상태 ── */

function updateTbState() {

[['bold','bold'],['italic','italic'],['underline','underline'],

['strike','strikeThrough'],['sup','superscript'],['sub','subscript']].forEach(([id,cmd]) => {

const el = document.getElementById('tb-'+id);

if (el) el.classList.toggle('on', document.queryCommandState(cmd));

});

}

/* ── 상태바 ── */

function updateStatus() {

const txt = rte.innerText || '';

const words = txt.trim().split(/\s+/).filter(Boolean).length;

const lines = ce.value.split('\n').length;

stInfo.textContent = `${txt.length.toLocaleString()}자 · ${words.toLocaleString()}단어 · ${lines}행`;

}

/* ── 복사 / 초기화 ── */

btnCopy.addEventListener('click', () => {

if (navigator.clipboard) navigator.clipboard.writeText(ce.value).then(flash);

else { ce.select(); document.execCommand('copy'); flash(); }

});

function flash() {

btnCopy.textContent = '복사 완료!'; btnCopy.classList.add('ok');

setTimeout(() => { btnCopy.textContent = '코드 복사'; btnCopy.classList.remove('ok'); }, 2000);

}

btnRst.addEventListener('click', () => {

if (confirm('초기 내용으로 되돌리겠습니까?')) {

rte.innerHTML = INIT;

ce.value = buildHTML(INIT);

updateStatus();

}

});

/* ── 드래그 리사이즈 ── */

let drag=false, sx=0, sw=0;

divEl.addEventListener('mousedown', e => {

drag=true; sx=e.clientX; sw=prePane.offsetWidth;

divEl.classList.add('on'); dragOvl.classList.add('on'); e.preventDefault();

});

document.addEventListener('mousemove', e => {

if (!drag) return;

const mw = mainEl.offsetWidth;

let nw = Math.max(mw*.15, Math.min(mw*.85, sw + e.clientX - sx));

const r = (nw / mw * 100).toFixed(2) + '%';

prePane.style.width = r; lbl.style.width = r;

});

document.addEventListener('mouseup', () => {

if (drag) { drag=false; divEl.classList.remove('on'); dragOvl.classList.remove('on'); }

});

/* ── 단축키 ── */

document.addEventListener('keydown', e => {

if ((e.ctrlKey||e.metaKey) && e.key==='h') { e.preventDefault(); toggleFind(); }

});

/* ── 초기 실행 ── */

rte.innerHTML = INIT;

ce.value = buildHTML(INIT);

updateStatus();

</script>

</body>

</html>

감사합니다.

끝.

냉

냉동실발굴단

03.07 · 61.♡.57.28

뭔지 모르지만 고맙습니다!
벗

벗님 → 냉동실발굴단 작성자

03.07 · 61.♡.153.123

이 부분 긁어서 .html 파일로 저장하신 후에, 브라우저에서 이 파일을 열면, 바로 사용하실 수 있습니다. ^^
5

5호라

03.07 · 175.♡.10.77

와우 능력자
벗

벗님 → 5호라 작성자

03.07 · 61.♡.153.123

AI한테 잘 설명만 해주면 멋진 결과물을 만들어주네요.
저는 그저 채찍만.. 흐흐흐. ^^;
가

가랑비 → 벗님

03.07 · 58.♡.137.93

(제 경우)
뭘 알아야 설명을 해주고 결과물 내놓으라고 할텐데 ㅠ
요즘 세상만사를 새로 배우는 느낌으로 지냅니다. ㅎㅎ
벗

벗님 → 가랑비 작성자

03.07 · 61.♡.153.123

잠시 'chatGPT'한테 물어봤습니다.
신

신사아님당

03.07 · 125.♡.243.26

우와~ 진짜 되네요. 싱기방기합니당. O_O
벗

벗님 → 신사아님당 작성자

03.07 · 61.♡.153.123

흐흐흐, ^^

댓글을 작성하려면 이 필요합니다.

자유게시판

추가 메뉴

댓글 (8)