当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 所见即所得编辑器 aynHTML 大全：（一）如何部署、嵌入、装载动态内容

Javascript
将HTML自动转为JS代码
一端时间轮换的广告
制作特殊字的脚本
美化下拉列表
文字幻灯片
判断是否输入完毕再激活提交按钮
JS控制表格隔行变色
左右两侧的广告代码 简单
父窗口获取弹出子窗口文本框的值
网页的标准,IMG不支持onload标签怎么办
一个很简单的办法实现TD的加亮效果.
文本框栏目介绍
自动检查并替换文本框内的字符
会自动逐行上升的文本框
列表内容的选择
对textarea框的代码调试，而且功能上使用非常方便，酷
提高代码性能技巧谈—以创建千行表格为例
Javascript的IE和Firefox兼容性汇编
让插入到 innerHTML 中的 script 跑起来
DEFER怎么用？

No. « 16 17 18 19 »

技术文章搜索

关键字

Javascript 中的 所见即所得编辑器 aynHTML 大全：（一）如何部署、嵌入、装载动态内容

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 126 ::
收藏到网摘: n/a

 

所见即所得编辑器 aynHTML 系列文章（一）如何部署、嵌入、装载动态内容

aynHTML 简介

aynHTML 是一款基于HyperText Component 技术的所见即所得的在线编辑器，支持表格，图像，样式表，等等，目前只能运行在 5.5 (或更高版本)的 Internet Explorer 浏览器中。
目前 aynHTML 的最高版本是v0.20b(该版本尚存在一些bug),我们使用的版本是v0.18b。
下面是aynHTML 官方网站的一个在线demo
http://www.aine.be/aynhtml/demo.html

这个在线demo 的反应速度可能会有点慢（至少曾经的一个版本是这样的），这是因为aynHTML有一个选项默认是打开的，只要关闭这个选项编辑器的处理速度就会有非常明显的提升。在这里先向大家简单介绍一下，见下面一段代码：

<AI:aiButton id="btnOutdent" contentEditable="false" cmd="Outdent" alt="减少缩进量" src="img/ico_outdent.gif" autoOff="1" check="1" />

上面一段代码位于aynHTML的核心文件aynHTML/aiEditor.htc 中，是用来描述编辑器的一个按钮（减少缩进量）的。默认情况下check 的值为1，意思是自动check 编辑器中焦点所在区域的状态，如字体大小、是否为粗体、斜体、对齐方式等等，这会大大降低编辑时的速度。
注：
1).aynHTML 比较适合对web 页面进行简单的在线编辑，并不适合用于复杂的美工处理。
2).aynHTML 编辑器不能被嵌入Frameset 中，如果被嵌入Frameset 的话，键盘上的快捷键(如Ctrl-v，粘贴功能)将全部失效；

如何把aynHTML 编辑器嵌入到页面中

如何部署aynHTMl

为了把 aynHTML editor 嵌入到 web 页面中，首先我们需要把aynHTML 的整个文件夹复制到 Web 站点的某个目录下（如程序文件的同级目录）；然后在需要嵌入编辑器的页面中中加入 <AI:aiEditor> </AI:aiEditor> 两个标记，并在<AI:aiEditor> 标记中告诉编辑器该文件夹的相对位置，如下例所示
<html xmlns:AI>
<head>
<?import namespace="AI" implementation="aiEditor.htc" />
</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" implementation="aiEditor.htc" />

[注：
dreamweaver 无法正确解释该 namespace 申明，当用dreamweaver 打开包含该声明的页面时会导致后面的一个标记被解释错误，如下面一段代码：

<!-- aynhtml editor -->
<?import namespace="AI" implementation="aynHTML/aiEditor.htc" />
<link href="aynHTML/external.css" rel="stylesheet" type="text/css">
<!-- aynhtml editor -->

将会被解释为：
<!-- aynhtml editor -->
<?import namespace="AI" implementation="aynHTML/aiEditor.htc" />
link href="aynHTML/external.css" rel="stylesheet" type="text/css">
<!-- aynhtml editor -->
其中的 <link/> 标记被吞掉了一个'<'
]

如何定制 aynHTML

标记 <AI:aiEditor> 中的属性是用来定义 editor 的属性和操作的，如：
<AI:aiEditor id="aiEditor"
    color="buttonface"
    content =""
    font="宋体 ,楷体_GB2312 ,黑体 ,仿宋 ,Arial ,Verdana , Tahoma, Times New Roman,Georgia"
    font_size="8,9,10,11,12,13,14,16,20,24,48"
    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       : 编辑器的界面颜色
content     ：用来获得和设置编辑器的内容
font        ：字体列表
font_size   ：字体大小列表
height      ：编辑器的高度
load_method ：编辑器装载内容的方式（inline 是缺省的选项，意思是装载<AI:aiEditor> 与 </AI:aiEditor> 两个标记中间的内容）
load_url    ：如果指定 load_method 为 html的话，则表示住在某个html页面，load_url 就是这个页面的链接地址
link_get    ：aynHTML 可以以配置文件维护一个文件列表，用户可以选择其中一个文件进行编辑，link_get 是用来定义配置文件的路径的
open_method ：与工具栏中打开按钮相关联的方法
palette     ：调色板中的色彩样式
path        ：aynHTML 编辑器核心文件的路径，该路径是相对于嵌入页面的相对路径
style_import：指示编辑器是否搜索所嵌入页面中的<style> 和 <link> 标记，缺省值为0
stylesheet  ：应用于编辑器的样式表
width       ：编辑器的宽度


如何在 editor 所嵌入的页面中读取 editor 中的 html 内容

1).如果 html tag 是直接嵌入在 <AI:aiEditor id="aiEditor"> </AI:aiEditor> tag 内， 则可以通过 aiEditor.innerHTML 或 aiEditor.innerText 来得到所要的内容。

2).如果 html 是通过 copy paste 形式填充到 editor 窗口中的，则无法用 aiEditor.innerHTML 或 aiEditor.innerText 读取 editor中的内容，目前的解决方法为：在 aiEditor.htc 中添加一个读取 editor 窗口中内容的方法 getContent()，如下所示：
<public:component tagName="aiEditor">
    <public:defaults viewLinkContent />
    ...
    <public:method name="getContent" internalname="c_get_content" />
</public:component>

<script language="javascript">
...
/* the custom method invoked by the extra aiEdirot */
function c_get_content() {
        return mode == 'html' ? aiEdit.innerHTML : aiEdit.innerText;
}
...
</script>

这样我们就可以在 editor 的外面读取 editor 中的内容了， 如：
<input type="button" value="getContent" onclick="javascript:alert(aiEditor.getContent());">

如何让编辑器显示动态内容

要在编辑器中编辑从数据库中取出的动态内容，只需要把<AI:aiEditor> 的属性 load_method 设置为 inline，然后把动态取得的内容插入<AI:aiEditor> 和 </AI:aiEditor> 两个标记中间就可以了。

简单实例：
<html xmlns:AI>
<head>
<?import namespace="AI" implementation="aiEditor.htc" />
</head>
<body>
<%
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open Application("newsconn")
sql = "SELECT newscontent FROM news_detail WHERE newsid='"&request("newsid")&"'"
Set rs = Server.CreateObject("ADODB.Recordset")
rs.Open sql,conn,1,2
%>
<AI:aiEditor id="aiEditor"
    color="buttonface"
    content =""
    font="宋体 ,楷体_GB2312 ,黑体 ,仿宋 ,Arial ,Verdana , Tahoma, Times New Roman,Georgia"
    font_size="8,9,10,11,12,13,14,16,20,24,48"
    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://www.aine.be/aynhtml/
http://www.aine.be/aynhtml/doc/aiEditor.html
http://www.aine.be/aynhtml/doc/aiTree.html
http://aynhtml.sourceforge.net/
http://sourceforge.net/project/aynhtml/

作者简介

吕克让 工学学士 2002年毕业于北京工业大学计算机学院
他最喜欢的花是文竹；最想做的是成为像 Richard Stallman 一样优秀的 Hacker。最近他正在学习如何使用 OpenCMS 管理网站内容。你可以通过 [email protected] 和他取得联系。