开发一个自己的HTML在线编辑器（一）

核心提示： 当用户点击第3个层的任意一个符号时，另一个javascript函数被调用，开发一个自己的HTML在线编辑器（一）(6)，它用来在编辑器中指针的位置处插入符号，这个函数需要3个参数，意思是用户在此状态下不能对其编辑，我们只能在这个层里看到HTML代码，第一个参数用来指定execCommand

当用户点击第3个层的任意一个符号时，另一个javascript函数被调用，它用来在编辑器中指针的位置处插入符号。这个函数需要3个参数。第一个参数用来指定execCommand的命令来在文档中插入一个图片（InsertImage），第二个参数是图片的路径，第三个参数是该图片所在的层的id。注意所有的符号在web应用程序中被放置在一个“Emoticons”文件夹下。

列表11

function insertImages(style,url,images)
{
　　document.getElementById(images).style.display = 'none'
　　document.frames['HamHtmlEditor1_content'].focus();
　　HamHtmlEditor1_content.document.execCommand(style,'',url)
　　document.frames['HamHtmlEditor1_content'].focus();
}

当单击“HTML视图”按钮后，第二个层被显示，而第一个层则被隐藏。这个层的“readonly”属性被设置成了“true”，意思是用户在此状态下不能对其编辑，我们只能在这个层里看到HTML代码。

列表12

function TransformtoHtml()
{
　　document.getElementById('HamHtmlEditor1_Div2').style.display = 'block';
　　document.getElementById('HamHtmlEditor1_Div2').innerText =
　　document.frames['HamHtmlEditor1_content'].document.body.innerHTML;
}

当单击“设计模式”按钮后，第二个层则被隐藏

列表13

function TransformToText()
{
　　document.getElementById('HamHtmlEditor1_Div2').style.display = 'none';
}