HTML在线编辑器 —— KindEditor

    我以前使用的HTML在线编辑器是FckEditor,功能相当强大,但是我人为在JSP环境下配置起来是比较复杂。
在配置中很容易出问题,所以到网上找了找,发现了一个配置比较简单功能也不错的编辑器KindEditor。

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

简单说明:

网站:点击这里
 
版权:免费(LGPL)
 
使用语言:DHTML, JavaScript
 
支持浏览器:
1) Internet Explorer 5.5++
2) Mozilla Firefox 1.0+
3) Mozilla 1.3+
4) NetScape 7+
5) Opera 9+
 
最新版本:2.5.6
 
应用对象:
1) Web邮件编辑
2) Blog/新闻文章编辑
3) BBS发表文章
 
演示:点击这里

官方下载:点击下载

配置方法:

一 简单使用方法

1. 把所有文件上传到程序所在目录下,例如:你的工程/editor/。

2. 在此目录下创建attached文件夹,在Linux系统下,把attached文件夹的权限改成777。

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



-----------------------------------------------------------------------

4. FORM的onsubmit属性里添加KindSubmit()函数。


或可以放在提交按钮的onclick属性里。

5. 如果KindEditor文件放在其它目录下,那就需要通过skinPath、iconPath属性指定图片、笑脸目录。

* 使用方法可以参考demo文件。

-----------------------------------------------------------------------

二 属性介绍
-----------------------------------------------------------------------
1. editorType
simple或full,简单模式或完全模式
默认值:full

2. safeMode
true或false,安全模式。true时过滤Script脚本。
默认值:false

3. uploadMode
true或false,上传模式。true时使用上传功能。
默认值:true

4. hiddenName
提交时编辑内容的POST参数名
默认值:无

5. editorWidth
编辑器宽度
默认值:700px

6. editorHeight
编辑器高度
默认值:400px

7. skinPath
编辑器图片路径
默认值:./skins/default/

8. iconPath
编辑器笑脸图片路径
默认值:./icons/

9. imageAttachPath
保存上传图片的路径
默认值:./attached/

10. imageUploadCgi
上传图片的CGI文件路径
默认值:./upload_cgi/upload.php

11. menuBorderColor
下拉菜单边框颜色
默认值:#AAAAAA

12. menuBgColor
下拉菜单背景颜色
默认值:#EFEFEF

13. menuTextColor
下拉菜单文本颜色
默认值:#222222

14. menuSelectedColor
下拉菜单选中颜色
默认值:#DDDDDD

15. toolbarBorderColor
工具栏背景颜色
默认值:#DDDDDD

16. toolbarBgColor
工具栏背景颜色
默认值:#EFEFEF

17. formBorderColor
编辑框边框颜色
默认值:#DDDDDD

18. formBgColor
编辑框背景颜色
默认值:#FFFFFF

19. buttonColor
按钮背景颜色
默认值:#AAAAAA

20. cssPath
指定CSS文件路径
默认值:./common.css
-----------------------------------------------------------------------

属性例子:
-----------------------------------------------------------------------



-----------------------------------------------------------------------

三 编写上传CGI
-----------------------------------------------------------------------
KindEditor不建议您使用upload_cgi里自带的CGI程序,因为用这个上传图片无法进行管理。
建议您图片原名和更改后名字一起保存到文件或数据库里,并按栏目保存在不同的目录下。

1. Form结构
--------------------------------------

更改后文件名
文件
描述




横隔
竖隔


--------------------------------------

2. 调用的JavaScript函数
parent.KindInsertImage("[图片URL]","[图片宽度]","[图片高度]","[图片边框]","[ALT里的描述]","[图片对齐方式]","[图片横向空白]","[图片竖向空白]");
最后上传成功后执行这个函数插入图片并关闭下拉菜单。
* 注意点: 文件要上传到JavaScript里imageAttachPath目录里。

parent.KindDisableMenu();
隐藏所有弹出菜单。

parent.KindReloadIframe();
重新装载图片弹出菜单。

3. 具体编写方法请参考upload_cgi里的程序。


以上的说明大部分在安装包里。其他的方法或有什么问题,大家可以去查看一下官方文档或上论坛看一下。
需要注意的是路径问题,否则将不能正常显示或报错。

你可能感兴趣的:(JavaScript)