开发一个自己的HTML在线编辑器(一)
2010-09-14 13:25:26 来源:WEB开发网创建两个被保护的变量,保存以上创建的字段的值。
列表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
注意如果你要在用户控件中包含多个实体,你必须为这些div层创建动态的标识。请注意,div层的ID被设置成了“userControlID_divlayer”。
结论
我们可以看到,开发你自己的HTML在线编辑器并不是很困难。在这篇文章里我详细的解释了javascript语言和XHTML。这是HTML在线编辑器的第一个版本,我们非常感谢你使用它并且提供给我们你的意见。它的第二个版本,将会有更多的特性,如果你有什么好的注意,欢迎告诉我们。我们目前正在开发第二个版本,它也将通过这个网站发布出来,其会增加复制,粘贴,剪切,项目符号,项目编号,打印等功能以及一个可自定义的工具栏。
希望这篇文章有阅读的价值。
更多精彩
赞助商链接