WEB开发网
开发学院网页设计JavaScript 开发一个自己的HTML在线编辑器(一) 阅读

开发一个自己的HTML在线编辑器(一)

 2010-09-14 13:25:26 来源:WEB开发网   
核心提示: 创建两个被保护的变量,保存以上创建的字段的值,开发一个自己的HTML在线编辑器(一)(9),列表19 protected string _text;protected string _html;第一个属性被称为“ContentText”,它可以获取文本并在你的后置代

创建两个被保护的变量,保存以上创建的字段的值。

列表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在线编辑器的第一个版本,我们非常感谢你使用它并且提供给我们你的意见。它的第二个版本,将会有更多的特性,如果你有什么好的注意,欢迎告诉我们。我们目前正在开发第二个版本,它也将通过这个网站发布出来,其会增加复制,粘贴,剪切,项目符号,项目编号,打印等功能以及一个可自定义的工具栏。

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

上一页  4 5 6 7 8 9 

Tags:开发 一个 自己

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接