|
|
首先要有一個編輯框，這個編輯框其實就是一個可編輯狀態的網頁， 我們用iframe來建立編輯框。
<IFRAME id=“HtmlEdit” style="WIDTH: 100%; HEIGHT: 296px" marginWidth=“0” marginHeight=“0”></IFRAME>
并且在加上Javascript代碼來指定HtmlEdit有編輯功能(下面提供完整的原代碼)：
復制代碼 代碼如下:
<script language="Javascript">
var editor;
editor = document.getElementById("HtmlEdit").contentWindow;
//只需鍵入以下設定，iframe立刻變成編輯器。
editor.document.designMode = 'On';
editor.document.contentEditable = true;
//但是IE與FireFox有點不同，為了兼容FireFox，所以必須創建一個新的document。
editor.document.open();
editor.document.writeln('<html><body></body></html>');
editor.document.close();
//字體特效 － 加粗方法一
function addBold()
{
editor.focus();
//所有字體特效只是使用execComman()就能完成。
editor.document.execCommand("Bold", false, null);
}
//字體特效 － 加粗方法二
function addBold()
{
editor.focus();
//獲得選取的焦點
var sel = editor.document.selection.createRange();
insertHTML("<b>"+sel.text+"</b>");
}
function insertHTML(html)
{
if (editor.document.selection.type.toLowerCase() != "none")
{
editor.document.selection.clear() ;
}
editor.document.selection.createRange().pasteHTML(html) ;
}
</script>
JavaScript技術：在線編輯器的實現原理(兼容IE和FireFox)，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
