手机html编辑器gb2312,所见即所得HTML编辑器 - KindEditor 2.4

所见即所得HTML编辑器 - KindEditor 2.4

程序名：KindEditor

版本：2.4

演示：

[url]http://www.kindsoft.net/editor/demo.html[/url]

下载：

[url]http://www.kindsoft.net/download/kindeditor-2.4.zip[/url]

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

版权：

1)非商业用户：免费

2)商业用户：收费

* 要了解详情请参考压缩包里的LICENCE.txt或

[url]http://www.kindsoft.net/buy.php[/url] 。

使用语言：DHTML, JavaScript

支持浏览器：

1) Internet Explorer 5.5++

2) Mozilla Firefox 1.0+

3) Mozilla 1.3+

4) NetScape 7+

5) Opera 9+

应用对象：

1) Web邮件编辑

2) Blog/新闻文章编辑

3) BBS发表文章

特色：

1) 总文件大小较小，节约下载时间。

2) 单一JavaScript程序，集成方便。

3) 不用弹出窗口(预览除外)，保证操做的流畅性。

主要功能：

1)源代码查看/编辑

2)预览

3)打印、回退、前进

4)剪切、复制、粘贴(IE专用)

5)全选

6)文字的粗体、斜体、下划线、删除线

7)左对齐、居中、右对齐、两端对齐

8)编号、项目符号

9)减小缩进、增长缩进

10)显示比例(IE专用)

11)插入层

12)插入表格

13)插入图片、上传图片(上传默认支持PHP和ASP)

14)插入Flash

15)插入视频

16)标题、选择字体、文字大小

17)文字颜色

18)文字背景颜色

19)插入笑脸

20)插入横线

21)插入特殊字符

22)超级连接建立及取消

23)文字上标和下标

24)插入当前日期、时间

25)删除格式

和2.3相比变动的地方有：

1. 增长了RealPlayer插入功能。

2. 增长了ASP上传程序。(须要ABCUpload组件)

3. 增长了图片增长对齐、间隔、描述设置。

4. 增长了Script过滤选择属性。

5. 增长了图片上传选择属性。

6. 增长了两端对齐。

7. 修改了先选择[字体、大小、颜色等]后再输入会无效的问题。

8. 修改了有些动做没法撤消的问题。

9. 修改了插入视频,链接,FLASH等等焦点默认不在提交按钮上的问题。

10. 修改了简单模式下没法提交内容的问题。

11. 取消层的默认宽度和高度。

12. 设置域名后本地图片时地址改为相对URL。

13. 增长了upload_cgi目录，存放CGI程序。

#############################################

#

# KindEditor 2.4 使用方法

#

#############################################

一 简单使用方法

1. 把全部文件上传到程序所在目录下，例如：http://你的域名/editor/。

2. 在此目录下建立attached文件夹，并把权限改为777。

3. 要添加编辑器的地方加入如下代码。(原来的TEXTAREA或其它编辑器能够先注释。)

这里[]里的内容要根据你的实际状况修改。

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

var editor = new KindEditor("editor"); //建立编辑器对象

editor.hiddenName = "[原TEXTAREA名字]";

editor.editorWidth = "[编辑器宽度,例如：700px]";

editor.editorHeight = "[编辑器高度,例如：400px]";

editor.show(); //显示

//提交时得到最终HTML代码的函数

function KindSubmit() {

editor.data();

}

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

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

或能够放在提交按钮的onclick属性里。

5. 若是KindEditor文件放在其它目录下，那就须要经过skinPath、iconPath属性指定图片、笑脸目录。

* 使用方法能够参考demo文件。

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

二 属性介绍

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

1. siteDomain

网站域名，这个域名下的图片改为相对路径。

默认值：无

例：wwww.kindsoft.net

2. editorType

simple或full，简单模式或彻底模式

默认值：full

3. safeMode

true或false，安全模式。true时过滤脚本和事件属性。

默认值：false

4. uploadMode

true或false，上传模式。true时使用上传功能。

默认值：true

5. hiddenName

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

默认值：无

6. editorWidth

编辑器宽度

默认值：700px

7. editorHeight

编辑器高度

默认值：400px

8. skinPath

编辑器图片路径

默认值：skins/default/

9. iconPath

编辑器笑脸图片路径

默认值：icons/

10. p_w_picpathAttachPath

保存上传图片的路径

默认值：attached/

11. p_w_picpathUploadCgi

上传图片的CGI文件路径

默认值：./upload_cgi/upload.php

12. menuBorderColor

下拉菜单边框颜色

默认值：#AAAAAA

13. menuBgColor

下拉菜单背景颜色

默认值：#EFEFEF

14. menuTextColor

下拉菜单文本颜色

默认值：#222222

15. menuSelectedColor

下拉菜单选中颜色

默认值：#DDDDDD

16. toolbarBorderColor

工具栏背景颜色

默认值：#DDDDDD

17. toolbarBgColor

工具栏背景颜色

默认值：#EFEFEF

18. formBorderColor

编辑框边框颜色

默认值：#DDDDDD

19. formBgColor

编辑框背景颜色

默认值：#FFFFFF

20. buttonColor

按钮背景颜色

默认值：#AAAAAA

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

属性例子：

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

var editor = new KindEditor("editor");

editor.siteDomain = "www.kindsoft.net";

editor.safeMode = true; // true 或 false

editor.uploadMode = true; // true 或 false

editor.hiddenName = "content"; //上面hidden的名字

editor.p_w_picpathUploadCgi = "./upload_cgi/upload.php"; //图片上传CGI程序

editor.editorType = "simple"; // simple 或 full

editor.skinPath = "skins/fck/"; //编辑器图片目录

editor.editorWidth = "700px"; //宽度

editor.editorHeight = "400px"; //高度

editor.menuBorderColor = '#696969';

editor.menuBgColor = '#EFEFDE';

editor.menuTextColor = '#000000';

editor.menuSelectedColor = '#C7C78F';

editor.toolbarBorderColor = '#696969';

editor.toolbarBgColor = '#EFEFDE';

editor.formBorderColor = '#696969';

editor.buttonColor = '#C7C78F';

editor.show();

function KindSubmit() {

editor.data(); //把编辑器的内容放在content隐藏Form里。

}

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

三 编写图片上传CGI

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

KindEditor不建议您使用upload_cgi里自带的CGI程序，由于用这个上传图片没法进行管理。

建议您图片原名和更改后名字一块儿保存到文件或数据库里，并按栏目保存在不一样的目录下。

1. Form结构

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

更改后文件名

文件

描述

宽

高

边

对齐方式

横隔

竖隔

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

2. 调用的JavaScript函数

parent.KindInsertImage("[图片URL]","[图片宽度]","[图片高度]","[图片边框]","[ALT里的描述]","[图片对齐方式]","[图片横向空白]","[图片竖向空白]");

最后上传成功后执行这个函数插入图片并关闭下拉菜单。

* 注意点: 文件要上传到JavaScript里p_w_picpathAttachPath目录里。

parent.KindDisableMenu();

隐藏全部弹出菜单。

parent.KindReloadIframe();

从新装载图片弹出菜单。

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

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

4、风格制做方法

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

1. 首先在skins目录下创建一个目录。例如： skins/myskin/

2. 把skins/default/目录下的全部文件复制到自定义风格目录下。

而后能够一个一个替换，大小能够不一样，但名字必须保持一致。

3. 在调用编辑器的地方，经过属性配置风格路径和编辑器颜色。

例如：

editor.skinPath = "skins/myskin/"; //指向刚才制做好的目录

editor.menuBorderColor = '#696969';

editor.menuBgColor = '#EFEFDE';

editor.menuTextColor = '#000000';

editor.menuSelectedColor = '#C7C78F';

editor.toolbarBorderColor = '#696969';

editor.toolbarBgColor = '#EFEFDE';

editor.formBorderColor = '#696969';

editor.buttonColor = '#C7C78F';

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

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

5、常见问题

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

1. 怎么在GB2312编码下使用KindEditor？

答：本编辑器默认采用UTF-8格式。要改为GB2312格式，用任何带有编码转换功能的编辑器(UltraEdit, EditPlus等)把KindEditor.js文件自己格式转换成GB2312就能够。

若使用图片上传功能，upload程序也要改为GB2312。

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