所见即所得(WYSWYG)HTML编辑器 - KindEditor 2.2

binghe

程序名：KindEditor

版本：2.2

演示：http://www.kindsoft.net/editor/demo.html

下载：http://www.kindsoft.net/download/kindeditor-2.2.zip

KindEditor是基于浏览器的简单的所见即所得(WYSWYG)HTML编辑器，有体积小、文件少、效率高等特点。它是100%用DHTML/JavaScript编写的，可以很方便地嵌入到ASP,ASP.NET,PHP,JSP等CGI程序里。

开发动机：现有的此类编辑器大部分比较大，下载时间长，执行效率低，不太适合应用于访问量比较大的网站。所以从去年开始一直想开发即满足常用功能又比较轻巧的HTML编辑器。

最终目标：打造一个功能全、速度快、兼容性好、使用方便的轻量级所见即所得HTML编辑器。

应用对象：
1) Web邮件编辑
2) Blog/新闻文章编辑
3) BBS发表文章

特点：
1) 总文件大小较小，节约下载时间。
2) 单一JavaScript程序，集成方便。
3) 不用弹出窗口（预览除外），保证作的流畅性。

版权：
1)非盈利用户:免费
2)再发布用户、商业用户:收费
* 非盈利用户只限于自己使用，不得和其它程序一起发布。

使用语言：DHTML, JavaScript

支持浏览器：
1) Internet Explorer 5.5++
2) Mozilla Firefox 1.0+
3) Mozilla 1.3+
4) NetScape 7+
5) Opera 9+

主要功能：
1)源代码查看/编辑
2)预览
3)打印、回退、前进
4)剪切、复制、粘贴(IE专用)
5)全选
6)文字的粗体、斜体、下划线、删除线
7)左对齐、居中、右对齐、两端对齐
8)编号、项目符号
9)减少缩进、增加缩进
10)显示比例(IE专用)
11)插入层
12)插入表格
13)插入图片、上传图片（上传默认支持PHP，不过其它CGI也可以使用。）
14)插入Flash
15)插入视频
16)标题、选择字体、文字大小
17)文字颜色
18)文字背景颜色
19)插入笑脸
20)插入横线
21)插入特殊字符
22)超级链接创建及取消
23)文字上标和下标
24)插入当前日期、时间
25)删除格式

使用说明：

一 默认使用 （服务器需要支持PHP）

1. 把所有文件上传到服务器上HTTP能访问的目录下，例如：http://你的域名/editor/。

2. 在编辑器目录下创建attached文件夹，并把权限改成777。

3. 要添加编辑器的地方加入以下代码。（原来的TEXTAREA或其它编辑器可以先注释。）
   这里[]里的内容要根据你的实际情况修改。

<input type="hidden" name="[原TEXTAREA名字]" value="[这里放你要编辑的内容]">
<script type="text/javascript" src="[JS路径]/KindEditor.js"></script>
<script type="text/javascript">
var editor = new KindEditor("editor"); //创建编辑器对象
editor.hiddenName = "[原TEXTAREA名字]";
editor.width = "[编辑器宽度,例如：700px]";
editor.height = "[编辑器高度,例如：400px]";
editor.show(); //显示
//提交时获得最终HTML代码的函数
function KindSubmit() {
        editor.data();
}
</script>

4. FORM的onsubmit属性里添加KindSubmit()函数。
<form name="formname" >

或可以放在提交按钮的onclick属性里。
<input type="button" value="Submit" >

* 注意：你要编辑的HTML代码里的<, >, "这三个字符必须先转换成&lt;, &gt;, "，否则页面显示不正常。

二 属性介绍

1. hiddenName
提交时编辑内容的POST参数名

2. width
编辑器宽度

3. height
编辑器高度

4. imagePath
编辑器images里的图片路径

5. iconPath
编辑器icons里的图片路径

6. imageAttachPath
保存上传图片的路径

7. imageUploadCgi
上传图片的CGI文件路径

8. menuBorderColor
下拉菜单边框颜色

9. menuBgColor
下拉菜单背景颜色

10. menuTextColor
下拉菜单文本颜色

11. menuSelectedColor
下拉菜单选中颜色

12. toolbarBgColor
玩具栏背景颜色

13. formBorderColor
编辑框边框颜色

14. formBgColor
编辑框背景颜色

三 编写上传CGI

* 上传图片时POST参数
1. fileData
文件FORM的NAME

2. fileName
修改后的文件名

3. imgWidth
图片宽度

4. imgHeight
图片高度

5. imgBorder
图片边框

* 调用的JavaScript函数
parent.KindInsertImage("[图片URL]","[图片宽度]","[图片高度]","[图片边框]");
最后上传成功后执行这个函数插入图片并关闭下拉菜单。

* 注意点: 文件要上传到JavaScript里imageAttachPath指定的目录里。

有任何疑问或Bug，请回复本贴，或在 http://www.kindsoft.net 上留言。