网站内容编辑器( 如何开发HTML编辑器？的目的就是介绍的方法介绍)

　　网站内容编辑器(

如何开发HTML编辑器？的目的就是介绍的方法介绍)

　　在用HTML开发网站的过程中，我们需要用到HTML编辑器，它是一个HTML开发工具。我们比较熟悉的是notepad++等HTML编辑器。在线 HTML 内容编辑器为用户提供了文本样式控制，例如文本颜色、字体大小等。本文的目的是介绍如何开发一个 HTML 编辑器。应用本文介绍的方法，您可以轻松开发出符合自己需要的、代码比较简单的HTML编辑器，实现HTML编辑器的基本功能。

　　开发方法如下：

　　一、添加可编辑的 iframe

　　实现 HTML 编辑器的第一步是在网页中放置一个可编辑的 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("");

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 上操作的类

　　由于在不同的浏览器中获取范围对象的方法有很大的不同，为了方便上面提到的两个操作的实现，封装了一个对选择HTML进行操作的类SelectionRange。这个类有两个方法，GetSelectedHtml 和 Replace，分别用于获取 HTML 和替换 HTML。其代码如下：

<p>

//用于记录浏览器的类型

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(/\