接下来这段代码用来改变字体。第一个参数是“FontName”，用来执行设置文字字体的命令，第二个参数是false或者0，第三个参数是用户所选择的文字。

列表15
function ChangeFontName()
{
        var fontName = document.getElementById("FontFamilyName");
        document.frames['HamHtmlEditor1_content'].document.execCommand('FontName',false,fontName.options[fontName.selectedIndex].text);
        document.frames['HamHtmlEditor1_content'].focus();
}
 
第三个下来列表用来选择所选文字的颜色。这些颜色是预先定义好的，如果你想可以设置更多的颜色，请修改相关的HTML代码。

列表16
function ChangeFontColor()
{
        var fontColor = document.getElementById("Color");
        document.frames['HamHtmlEditor1_content'].document.execCommand('ForeColor',false,fontColor.options[fontColor.selectedIndex].text);
        document.frames['HamHtmlEditor1_content'].focus();
}
 
最后的功能用来把用户输入的文本值存储到一个隐藏字段中，其详细的HTML值存储到另一个隐藏字段中。这样即使编辑器失去焦点，也可以获取到值，下一部份你可以看到在编码的过程中通过使用两个属性来取得隐藏字段的值。

列表17
function CloneText()
{
        document.getElementById('HamHtmlEditor1_ContentTxt').innerText = document.frames['HamHtmlEditor1_content'].document.body.innerText;
        document.getElementById('HamHtmlEditor1_ContentHtml').value = document.frames['HamHtmlEditor1_content'].document.body.outerHTML;
}
 
这部分完成后，你的javascript文件就准备完了。你如果想在你的用户控件中使用这个文件，就需要在代码中加入<head>标签。如下
<script src="HTMLEditor.js" language="javascript" type="text/javascript></script>
 
如果你想调试javascript，需要加一个词“debugger”。这样编译时将开始调试模式。或者你也可以设置你的IE浏览器，把“禁用脚本调试（Internet Explorer）”和“禁用脚本调试（其他）”两个复选框的选中状态取消，然后添加你的端点。（译者注：调试js可以参考这篇文章：在Visual Studio中调试JavaScript）


编辑器属性
如果想将用户输入的文本保存为.txt文件或者把HTML代码保存到另一个.txt文件，你可以在这个控件中添加以下两种属性：

首先在你的ascx.cs页面创建两个字段。

列表18
protected System.Web.UI.HtmlControls.HtmlInputText ContentTxt;
protected System.Web.UI.HtmlControls.HtmlInputText ContentHtml;
 
创建两个被保护的变量，保存以上创建的字段的值。

列表19
protected string _text;
protected string _html;
 
第一个属性被称为“ContentText”，它可以获取文本并在你的后置代码中赋值给一个变量。

ContentTxt被声明成一个HtmlInputText控件，它的Value属性被存储到_text字符串变量中。

列表20
public string ContentText
{
        get    
        {
                return _text = ContentTxt.Value;
        }
        set
        {
                _text = value;
        }
}
 
第二个属性被称为“ContentInnerHtml”，它可以获得详细的HTML代码。

ContentHtml被声明成一个HtmlInputText控件，它的Value属性被存储到_html字符串变量中。

列表21
public string ContentInnerHtml
{
        get
        {
                return _html    = ContentHtml.Value;
        }
        set
        {
                _html = value;
        }
}
 
添加一个样式表
在这部分我们将创建一个样式表（Styles.css），用来修改工具栏和框架的UI。我们将设置工具栏的背景颜色为蓝色。框架右侧和底部的也设置成相同的颜色。通过修改下面的代码，你可以随便设置控件的界面（UI）。
列表22
.HtmlView
{
        background-color:white;
        border-bottom-width:medium;
        border-bottom-style:solid;
        border-bottom-color:cornflowerblue;
        border-right-width:medium;
        border-right-color:cornflowerblue;
        border-right-style:solid;
}
.FirstDiv
{
        background-color:white;
        border-bottom-width:medium;
        border-bottom-style:solid;
        border-bottom-color:cornflowerblue;
        border-right-width:medium;
        border-right-color:cornflowerblue;
        border-right-style:solid;
}
.toolbar
{
        background-color:cornflowerblue;
        background-repeat:repeat;
}
 
现在在你用户控件的<head>标签内链接上这个样式表，代码如下：
<LINK href="Styles.css" type="text/css" rel="stylesheet">
 
图3
上接[翻译]开发一个自己的HTML在线编辑器（一）_翻译
注意如果你要在用户控件中包含多个实体，你必须为这些div层创建动态的标识。请注意，div层的ID被设置成了“userControlID_divlayer”。 


结论
我们可以看到，开发你自己的HTML在线编辑器并不是很困难。在这篇文章里我详细的解释了javascript语言和XHTML。这是HTML在线编辑器的第一个版本，我们非常感谢你使用它并且提供给我们你的意见。它的第二个版本，将会有更多的特性，如果你有什么好的注意，欢迎告诉我们。我们目前正在开发第二个版本，它也将通过这个网站发布出来，其会增加复制，粘贴，剪切，项目符号，项目编号，打印等功能以及一个可自定义的工具栏。

希望这篇文章有阅读的价值。

[原文×××]

祝编程愉快！