詳解如何開發HTML編輯器

更新時間：2021-03-25 17:20:24 來源：動力節點瀏覽1069次

我們在使用HTML開發網站的過程中，需要用到HTML編輯器，也就是HTML開發工具。我們比較熟悉就是notepad++之類的HTML編輯器，在線的HTML內容編輯器為用戶提供文本的樣式控制，例如文字的顏色、字體大小等。本文的目的就是介紹如何開發HTML編輯器。應用本文介紹的方法，可以方便的開發出滿足自己需求的，代碼相對比較精簡的HTML編輯器，實現HTML編輯器的基本功能。

開發方法如下：

一、添加一個可編輯的iframe

實現HTML編輯器的第1步就是在網頁中放置一個可編輯的iframe用來輸入文本，使iframe可編輯方法相當簡單，只需要將iframe的designMode設置為on即可，具體步驟如下：

var editor = document.getElementById("IFRAME的ID");

var editorDoc = editor.contentWindow.document;

var editorWindow = editor.contentWindow;

editorDoc.designMode = "on";

editorDoc.open();

editorDoc.write("<html><head></head><body style='margin:0px; padding: 0px;'></body></html>");

editorDoc.close();

二、設置選中文本的樣式

設置選中文本樣式的方法最簡單的方式就是使用document.execCommand,但是execCommand功能比較局限，有時不能滿足需求，例如：execCommand設置字體大小只能是1-7,不能使用像素大小，而且如果你在點擊工具欄按鈕到調用execCommand的過程中點擊了其他的DIV，iframe的選中內容會消失，這時調用execCommand是無效的。因此本文介紹另一種方法，基本思路如下：

(1) 獲取選中的HTML；

(2) 修改HTML的樣式；

(3) 用修改后的HTML替換選中的HTML。

1、獲取選中的HTML

在不同的瀏覽器中獲取選中的HTML的方法是不同的，在IE中可以使用

var range = document.selection.createRange()

在Firefox,Chrome中則使用

var range = window.getSelection().getRangeAt(0);

2、替換選中的HTML

在獲取了表示選中內容的對象后，就可以調用其方法來替換掉選中的內容。在不同的瀏覽器中替換選中的HTML的方法有所差異，在IE中可以只需調用range.pasteHTML就行了，在Firefox,Chrome中則使用range.deleteContents 和 range.insertNode 兩個方法來實現

3、封裝一個操作選中HTML的類

由于獲取的range對象的方法在不同瀏覽器中差異很大，因此，為了方便實現上面提到的兩個操作，封裝了一個操作選中HTML的類SelectionRange，該類有兩個方法，GetSelectedHtml和Replace，分別用于獲取HTML和替換HTML。其代碼如下：

//用于記錄瀏覽器的類型

var browser = {};

var ua = navigator.userAgent.toLowerCase();

browser.msie = (/msie ([\d.]+)/).test(ua);

browser.firefox = (/firefox\/([\d.]+)/).test(ua);

browser.chrome = (/chrome\/([\d.]+)/).test(ua);

//獲取多個節點的HTML

function GetInnerHTML(nodes)

{

????var builder = [];

????for (var i = 0; i < nodes.length; i++)

????{

????????if (nodes[i].nodeValue != undefined)

????????{

????????????builder.push(nodes[i].innerHTML);

????????}

????????else

????????{

????????????if (nodes[i].textContent) builder.push(nodes[i].textContent.replace(/\</ig, function() { return "<"; }));

????????????else if (nodes[i].nodeValue) builder.push(nodes[i].nodeValue.replace(/\</ig, function() { return "<"; }));

????????}

????}

????return builder.join("");

}

function SelectionRange(doc, range)

{

????//獲取選中的內容的HTML

????this.GetSelectedHtml = function()

????{

????????if (range == null) return "";

????????if (browser.msie)

????????{

????????????if (range.htmlText != undefined) return range.htmlText;

????????????else return "";

????????}

????????else if (browser.firefox || browser.chrome)

????????{

????????????return GetInnerHTML(range.cloneContents().childNodes);

????????}

????????else

????????{

????????????return "";

????????}

????}

????//用html替換選中的內容的HTML

????this.Replace = function(html)

????{

????????if (range != null)

????????{

????????????if (browser.msie)

????????????{

????????????????if (range.pasteHTML != undefined)

????????????????{

????????????????????//當前選中html可能以為某種原因（例如點擊了另一個DIV）而丟失，重新選中

????????????????????range.select();

????????????????????range.pasteHTML(html);

????????????????????return true;

????????????????}

????????????}

????????????else if (browser.firefox || browser.chrome)

????????????{

????????????????if (range.deleteContents != undefined && range.insertNode != undefined)

????????????????{

????????????????????//將文本html轉換成DOM對象

????????????????????var temp = doc.createElement("DIV");

????????????????????temp.innerHTML = html;

????????????????????var elems = [];

????????????????????for (var i = 0; i < temp.childNodes.length; i++)

????????????????????{

????????????????????????elems.push(temp.childNodes[i]);

????????????????????}

????????????????????

????????????????????//刪除選中的節點

????????????????????range.deleteContents();

????????????????????

????????????????????//將html對應的節點(即temp的所有子節點)逐個插入到range中，并從temp中刪除

????????????????????for (var i in elems)

????????????????????{

????????????????????????temp.removeChild(elems[i]);

????????????????????????range.insertNode(elems[i]);

????????????????????}

????????????????????return true;

????????????????}

????????????}

????????}

????????return false;

????}

}

與此同時，還實現了一個函數GetSelectionRange用于獲取當前選中文本對應的SelectionRange對象，

function GetSelectionRange(win)

{

????var range = null;

????if (browser.msie)

????{

????????range = win.document.selection.createRange();

????????if (range.parentElement().document != win.document)

????????{

????????????range = null;

????????}

????}

????else if (browser.firefox || browser.chrome)

????{

????????var sel = win.getSelection();

????????if (sel.rangeCount > 0) range = sel.getRangeAt(0); else range = null;

????}

????return new SelectionRange(win.document, range);

}

4、修改選中的HTML的樣式

修改選中的HTML的樣式方法并不復雜，只需要將HTML轉成DOM對象，然后遞歸的設置每一個節點對應的樣式的值即可,具體代碼如下：

function SetNodeStyle(doc, node, name, value)

{

????if (node.innerHTML == undefined)

????{

????????return node;

????}

????else

????{

????????node.style[name] = value;

????????for (var i = 0; i < node.childNodes.length; i++)

????????{

????????????var cn = node.childNodes[i];

????????????if (node.innerHTML != undefined)

????????????{

????????????????SetNodeStyle(doc, cn, name, value);

????????????}

????????}

????????return node;

????}

}

function SetStyle(doc, html, name, value)

{

????var dom = doc.createElement("DIV");

????dom.innerHTML = html;

????for (var i = 0; i < dom.childNodes.length; i++)

????{

????????var node = dom.childNodes[i];

????????if (node.innerHTML == undefined)

????????{

????????????//如果是文本節點，則轉換轉換成span

????????????var span = doc.createElement("SPAN");

????????????span.style[name] = value;

????????????if (node.nodeValue != undefined) span.innerHTML = node.nodeValue.replace(/\</ig, function() { return "<"; });

????????????else if (node.textContent != undefined) span.innetHTML = node.textContent.replace(/\</ig, function() { return "<"; });

????????????//替換掉文本節點

????????????dom.replaceChild(span, node);

????????}

????????else

????????{

????????????SetNodeStyle(doc, node, name, value);

????????}

????}

????return dom.innerHTML;

}

如何開發HTML編輯器？相必大家一定很清楚了，使用以上的代碼，就可以相當方便的實現一個HTML編輯器，你可以實現設置行距，縮進，插入圖片等功能。在本站的HTML教程中，會詳細地教大家如何成功開發一個HTML編輯器，給出了不同的設計方案，感興趣的小伙伴可以自己去嘗試一下。

HTML教程

上一篇簡述HTML格式標簽下一篇HTML image標簽詳解

大战熟女丰满人妻av-荡女精品导航-岛国aaaa级午夜福利片-岛国av动作片在线观看-岛国av无码免费无禁网站-岛国大片激情做爰视频

詳解如何開發HTML編輯器

JVM

多線程下載器項目實戰

Java日志框架全集（選學）

高并發解決方案（選學）

零基礎能學Java嗎？

零基礎能學Java嗎？

零基礎能學Java嗎？

關于我們

課程中心

在線課程

資料廣場

全國免費電話