站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题所见即所得编辑器 aynHTML 大全——(一)如何部署、嵌入、装载动态内容

所见即所得编辑器 aynHTML 大全——(一)如何部署、嵌入、装载动态内容

摘要: 所见即所得编辑器 aynHTML 大全——(一)如何部署、嵌入、装载动态内容


所见即所得编辑器 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有一个选项默认是打开的,只要关闭这个选项编辑器的处理速度就会有非常明显的提升。在这里先向大家简单介绍一下,见下面一段代码:



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

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

如何部署aynHTMl

为了把 aynHTML editor 嵌入到 web 页面中,首先我们需要把aynHTML 的整个文件夹复制到 Web 站点的某个目录下(如程序文件的同级目录);然后在需要嵌入编辑器的页面中中加入 两个标记,并在 标记中告诉编辑器该文件夹的相对位置,如下例所示

<head>
<?import namespace="AI" implementation="aiEditor.htc" />
</head>
<body>

Welcome to aynHTML Editor !



如何定制 aynHTML

标记 中的属性是用来定义 editor 的属性和操作的,如:
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">
....

其中:
color : 编辑器的界面颜色
content :用来获得和设置编辑器的内容
font :字体列表
font_size :字体大小列表
height :编辑器的高度
load_method :编辑器装载内容的方式(inline 是缺省的选项,意思是装载 与 两个标记中间的内容)
load_url :如果指定 load_method 为 html的话,则表示住在某个html页面,load_url 就是这个页面的链接地址
link_get :aynHTML 可以以配置文件维护一个文件列表,用户可以选择其中一个文件进行编辑,link_get 是用来定义配置文件的路径的
open_method :与工具栏中打开按钮相关联的方法
palette :调色板中的色彩样式
path :aynHTML 编辑器核心文件的路径,该路径是相对于嵌入页面的相对路径
style_import:指示编辑器是否搜索所嵌入页面中的