html编辑器app开发文档（如何开发HTML编辑器）

本文目录

• 如何开发HTML编辑器
• html编辑器的使用方法
• html编辑器的介绍

如何开发HTML编辑器

开发方法如下：

1.添加一个可的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();

2.设置选中文本的样式

设置选中文本样式的方法最简单的方式就是使用document.execCommand,但是execCommand功能比较局限，有时不能满足需求，例如：execCommand设置字体大小只能是1-7,不能使用像素大小，而且如果你在点击工具栏按钮到调用execCommand的过程中点击了其他的DIV，iframe的选中内容会消失，这时调用execCommand是无效的。因此本文介绍另一种方法，基本思路如下：
(1) 获取选中的HTML；
(2) 修改HTML的样式；
(3) 用修改后的HTML替换选中的HTML。

2.1 获取选中的HTML

在不同的浏览器中获取选中的HTML的方法是不同的，在IE中可以使用

var range = document.selection.createRange()
在Firefox,Chrome中则使用var range = window.getSelection().getRangeAt(0);

2.2 替换选中的HTML

通过2.1的方法获取了表示选中内容的对象后，就可以调用其方法来替换掉选中的内容。在不同的浏览器中替换选中的HTML的方法有所差异，在IE中可以只需调用range.pasteHTML就行了，在Firefox,Chrome中则使用range.deleteContents 和 range.insertNode 两个方法来实现

2.3 封装一个操作选中HTML的类

由于2.1中获取的range对象的方法在不同浏览器中差异很大，因此，为了方便实现2.1和2.2提到的两个操作，封装了一个操作选中HTML的类SelectionRange，该类有两个方法，GetSelectedHtml和Replace，分别用于获取HTML和替换HTML。其代码如下：

//用于记录浏览器的类型
var browser = {};
var ua = navigator.userAgent.toLowerCase();
browser.msie = (/msie (+)/).test(ua);
browser.firefox = (/firefox\/(+)/).test(ua);
browser.chrome = (/chrome\/(+)/).test(ua);
//获取多个节点的HTML
function GetInnerHTML(nodes)
{
    var builder = ;
    for (var i = 0; i 《 nodes.length; i++)
    {
        if (nodes.nodeValue != undefined)
        {
            builder.push(nodes.innerHTML);
        }
        else
        {
            if (nodes.textContent.replace(/\《/ig, function() { return "《"; }));
            else if (nodes.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);
                    }
                    
                    //删除选中的节点
                    range.deleteContents();
                    
                    //将html对应的节点(即temp的所有子节点)逐个插入到range中，并从temp中删除
                    for (var i in elems)
                    {
                        temp.removeChild(elems);
                        range.insertNode(elems);
                    }
                    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);
}
2.4 修改选中的HTML的样式
修改选中的HTML的样式方法并不复杂，只需要将HTML转成DOM对象，然后递归的设置每一个节点对应的样式的值即可,具体代码如下：
function SetNodeStyle(doc, node, name, value)
{
    if (node.innerHTML == undefined)
    {
        return node;
    }
    else
    {
        node.style = value;
        for (var i = 0; i 《 node.childNodes.length; i++)
        {
            var cn = node.childNodes;
            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;
        if (node.innerHTML == undefined)
        {
            //如果是文本节点，则转换转换成span
            var span = doc.createElement("SPAN");
            span.style = 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;
}
2.5 示例
使用以上的代码，就可以相当方便的实现一个HTML器，例如，以下代码实现将选中文本的字体大小设置为32px：
var range = GetSelectionRange(editorWindow);
var html = SetStyle(editorDoc, range.GetSelectedHtml(), "fontSize", "32px");
range.Replace(html);
同理，你可以实现设置行距，缩进，插入图片等功能。
3.总结
本文给出的代码兼容IE，Firefox和Chrome，

html编辑器的使用方法

系统在许多地方均采用了功能强大的HTML器。通过本器可以直接进行图文混排、表格，也可以将WORD或DREAMWEAVER、FRONTPAGE中好的文档直接拷贝到器内，甚至可以将网页上显示的内容直接拷贝回框。
本系统的Html器功能非常齐全，现将主要功能图标说明如下：
图标
功能说明
设置文字正文、标题一、标题二等
设置字体
设置字体大小
设置文字粗体
设置文字斜体
设置文字下划线
设置文字颜色
设置文字背景色
设置上标
设置下标
设置文字删除线
插入移动字幕
剪切
粘贴
删除
撤销操作
恢复操作
取消对齐
左对齐
居中对齐
右对齐
减少缩进
增加缩进
添加水平线
编号
项目符号
创建一个链接，可以是给文字或图片加上链接
取消链接
插入图片（上传新图片或从图库中选择已经上传的图片）
修改图片属性，如图文环绕方式，图文间距，图片尺寸等
插入一张表格
选中表格后，表格属性。如边框宽度，边框间距
表格单元格属性
表格中在当前单元格上方插入一行
表格中在当前单元格下方插入一行
表格中在当前单元格左侧插入一列
表格中在当前单元格右侧插入一列
表格中删除当前列
表格中删除当前行
辅助线功能。当表格边框为0的时候，器中看不到表格框。使用辅助线可以在有表格框的位置显示虚线。
(很重要，当显示了辅助线之后，你会发现很多的操作困难可以迎刃而解)
#p#副标题#e#
下图为Html器页面图示：
如果直接对页面中的文字进行，有可能会使原有页面变得混乱。但如果点击“辅助线”按钮，你会发现如下图所示：
显示了表格线之后，你就可以随心所欲的进行，而不必担心破坏原有页面布局了。
从以上表格中可以发现，html器的使用非常简单。如果你了解Word的使用，你就可以非常轻松的利用html器来信息内容。
Html器提供三种视图：普通、html和预览。
如果你了解html代码，你可以直接进行代码的。无论在普通视图与html视图两种方式中进行，你都可以随时通过预览查看效果。
如果你会用Dreamweaver或者Frontpage工具制作网页，你可以直接采用那些工具制作网页后，拷贝新页面的源代码。然后点击“Html”标签，将源代码粘贴进去，就立即生成一个同网页制作工具制作出来的相同的网页。非常方便！
#p#副标题#e#

html编辑器的介绍

制作html（标准通用标记语言下的一个应用）的工具，可自定义窗囗，主题、索引，可选择添搜索页，无任何不自由。可以使用专业的HTML器来 HTML：Amaya（单位：万维网联盟）Dreamweaver（单位：奥多比、Adobe）Frontpage（单位：微软）Microsoft Expression Web（单位：微软）CoffeeCup HTML EditorCKEditor不过，使用一款简单的纯文本器是学习HTML的好方法，纯文本器比如Notepad（个人计算机）或 TextEdit（Mac）。html教程加群四一八中间三五五最后五三一