在線編輯器的實現(xiàn)原理(兼容IE和FireFox)
更新時間：2007年03月09日 00:00:00 作者：
在線編輯器在我們?nèi)粘５捻椖块_發(fā)中非常有用（如新聞系統(tǒng)），它可以方便地實現(xiàn)文章的在線編輯，省掉了FrontPage等工具。那么是怎樣實現(xiàn)瀏覽器在線編輯功能的呢? 首先需要IE的支持,在IE5.5以后就有一個編輯狀態(tài). 就是利用這個編輯狀態(tài),然后用javascript來控制在線編輯的。
首先要有一個編輯框，這個編輯框其實就是一個可編輯狀態(tài)的網(wǎng)頁， 我們用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;
//只需鍵入以下設(shè)定，iframe立刻變成編輯器。
editor.document.designMode = 'On';
editor.document.contentEditable = true;
//但是IE與FireFox有點不同，為了兼容FireFox，所以必須創(chuàng)建一個新的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>
首先要有一個編輯框，這個編輯框其實就是一個可編輯狀態(tài)的網(wǎng)頁， 我們用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;
//只需鍵入以下設(shè)定，iframe立刻變成編輯器。
editor.document.designMode = 'On';
editor.document.contentEditable = true;
//但是IE與FireFox有點不同，為了兼容FireFox，所以必須創(chuàng)建一個新的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>
相關(guān)文章
這篇文章主要介紹了JavaScript實現(xiàn)的多種鼠標拖放效果,涉及JavaScript響應鼠標事件動態(tài)變換頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了在線所見即所得HTML編輯器的實現(xiàn)原理淺析,本文用初始化、打開編輯功能、獲取編輯器的內(nèi)容、增加樣式設(shè)置、再進一步等步驟闡述在線編輯器的基本實現(xiàn)原理,需要的朋友可以參考下2015-04-04
用js實現(xiàn)每隔一秒刷新時間的實例(含年月日時分秒)
下面小編就為大家?guī)硪黄胘s實現(xiàn)每隔一秒刷新時間的實例(含年月日時分秒)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
javascript使用avalon綁定實現(xiàn)checkbox全選
checkbox全選應該是一個比較實用的前端技巧吧，很多時候我們都需要點擊一個checkbox，然后將所有的復選框自動全部選中，一些CMS系統(tǒng)的后臺中，使用本JS效果后，會大大增強了操作體驗，那么究竟是如何實現(xiàn)這一功能的呢？2015-05-05
開啟Javascript中apply、call、bind的用法之旅模式
在Javascript中，F(xiàn)unction是一種對象。Function對象中的this指向決定于函數(shù)被調(diào)用的方式,使用apply，call 與 bind 均可以改變函數(shù)對象中this的指向。2015-10-10
JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別
js中一般使用tofixed與round處理數(shù)據(jù)四舍五入，那么tofixed與round有什么區(qū)別呢？下面小編給大家分享JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別，需要的朋友參考下吧2017-10-10
怎么理解wx.navigateTo的events參數(shù)使用詳情
這篇文章主要介紹了怎么理解wx.navigateTo的events參數(shù)使用詳情，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個對當前文檔，當前選擇或者給出范圍的命令。在HTML5中，execCommand可以通過JavaScript代碼來調(diào)用，使得開發(fā)者可以在網(wǎng)頁中實現(xiàn)一些復雜的文本操作。在HTML編輯器中這個命令用得很多，酷炫的強大功能。2023-07-07
js實現(xiàn)的簡潔網(wǎng)頁滑動tab菜單效果代碼
這篇文章主要介紹了js實現(xiàn)的簡潔網(wǎng)頁滑動tab菜單效果代碼,可實現(xiàn)簡單的鼠標滑過tab標簽切換的功能,非常簡單實用,需要的朋友可以參考下2015-08-08
多種方法實現(xiàn)load加載完成后把圖片一次性顯示出來
如何一個load 加載完成后把圖片一次性顯示出來，下面有個不錯的方法，希望對大家有所幫助2014-02-02