從零打造輕量級 HTML 編輯器：iframe designMode 與選取區塊樣式控制

啟用編輯模式

var editor = document.getElementById("iframeId");
var editorDoc = editor.contentWindow.document;
editorDoc.designMode = "on";
editorDoc.open();
editorDoc.write("<html><head></head><body style='margin:0;padding:0'></body></html>");
editorDoc.close();

設定選取文字樣式

document.execCommand 功能受限 (字體大小僅 1-7、焦點切換易遺失選取區)。改用選取區 HTML 替換法：

1. 取得選取區：IE 用 document.selection.createRange()，Firefox/Chrome 用 window.getSelection().getRangeAt(0)。
2. 修改 HTML 樣式 (包裹 <span style="..."> 等)。
3. 替換選取區：IE 用 range.pasteHTML，Firefox/Chrome 用 range.deleteContents() + range.insertNode()。

此法支援像素級字體大小、任意 CSS 樣式，且不受焦點切換影響。