所见即所得编辑器 aynHTML 系列文章（一）如何部署、嵌入、装载动态内容
aynHTML 简介
aynHTML 是一款基于HyperText Comp><AI:aiButt c cmd="Outdent" alt="减少缩进量" src="http://www.dedecms.com/web-art/htmlbase/Javascript/20041113/img/ico_outdent.gif" autoOff="1" check="1" />
<?import namespace="AI" implementati />
</head>
<body>
<AI:aiEditor id="aiEditor" path="aynHTML/" load_method="inline">
<p align="center"><b>Welcome to aynHTML Editor !</b></p>
</AI:aiEditor>
<!-- <AI:aiEditor> 与 </AI:aiEditor> 两个标记中间的内容将被格式化后显示在编辑器中 -->
</body>
</html>
下面一节我们将详细介绍如何定制aynHTML 编辑器。
注：
1).为了使aynHTML 编辑器正常运行，我们必须为其（ <AI:aiEditor> </AI:aiEditor> ）声明 AI 的 namespace，如上面代码中的
<?import namespace="AI" implementati />
[注：
dreamweaver 无法正确解释该 namespace 申明，当用dreamweaver 打开包含该声明的页面时会导致后面的一个标记被解释错误，如下面一段代码：
<!-- aynhtml editor -->
<?import namespace="AI" implementati />
<link href="http://www.dedecms.com/web-art/htmlbase/Javascript/20041113/aynHTML/external.css" rel="stylesheet" type="text/css">
<!-- aynhtml editor -->
将会被解释为：
<!-- aynhtml editor -->
<?import namespace="AI" implementati />
link href="http://www.dedecms.com/web-art/htmlbase/Javascript/20041113/aynHTML/external.css" rel="stylesheet" type="text/css">
<!-- aynhtml editor -->
其中的 <link/> 标记被吞掉了一个''<''
]
如何定制 aynHTML
标记 <AI:aiEditor> 中的属性是用来定义 editor 的属性和操作的，如：
<AI:aiEditor id="aiEditor"
color="butt
f
f
height="400"
hide_btn="open,save,image"
load_method="inline"
load_url=""
link_get="aynHTML/sample/text/links.xml"
open_method="default"
palette="web, system"
path="aynHTML/"
style_import="1"
stylesheet="aynHTML/internal.css"
width="600">
....
</AI:aiEditor>
其中:
color : 编辑器的界面颜色
c> </AI:aiEditor> tag 内， 则可以通过 aiEditor.innerHTML 或 aiEditor.innerText 来得到所要的内容。
2).如果 html 是通过 copy paste 形式填充到 editor 窗口中的，则无法用 aiEditor.innerHTML 或 aiEditor.innerText 读取 editor中的内容，目前的解决方法为：在 aiEditor.htc 中添加一个读取 editor 窗口中内容的方法 getC>
<public:defaults viewLinkC internalname="c_get_c>
...
/* the custom method invoked by the extra aiEdirot */
functi value="http://www.dedecms.com/web-art/htmlbase/Javascript/20041113/getC>
如何让编辑器显示动态内容
要在编辑器中编辑从数据库中取出的动态内容，只需要把<AI:aiEditor> 的属性 load_method 设置为 inline，然后把动态取得的内容插入<AI:aiEditor> 和 </AI:aiEditor> 两个标记中间就可以了。
简单实例：
<html xmlns:AI>
<head>
<?import namespace="AI" implementati />
</head>
<body>
<%
Set c
color="butt
f
f
height="400"
hide_btn="open,save,image"
load_method="inline"
load_url=""
link_get="aynHTML/sample/text/links.xml"
open_method="default"
palette="web, system"
path="aynHTML/"
style_import="1"
stylesheet="aynHTML/internal.css"
width="600">
<%=rs("newscontent")%>
</AI:aiEditor>
<%
rs.Close
conn.Close
Set rs = nothing
Set conn = nothing
%>
</body>
</html>
在线资源和参考文档
http://aine.be/aynhtml/
http://aine.be/aynhtml/doc/aiEditor.html
http://aine.be/aynhtml/doc/aiTree.html
http://aynhtml.sourceforge/
http://sourceforge/project/aynhtml/
作者简介
吕克让 工学学士 2002年毕业于北京工业大学计算机学院
他最喜欢的花是文竹；最想做的是成为像 Richard Stallman 一样优秀的 Hacker。最近他正在学习如何使用 OpenCMS 管理网站内容。你可以通过 lvkrnewer@hotmail 和他取得联系。
无忧CMS，5ucms.org建站仿站首选！
相关分类
