`

所见即所得在线HTML编辑器 - KindEditor 2.5 [完全免费]

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

版权:免费(LGPL)

演示:http://www.kindsoft.net/editor/demo.html
下载:http://www.kindsoft.net/download/kindeditor-2.5.zip

2.5 变更内容:
1. 媒体和Flash改成EMBED。
2. 增加cssPath属性。
3. 全局变量前面加KE_。

关于LGPL:http://www.opensource.org/licenses/lgpl-license.php

使用方法:http://www.kindsoft.net/editor/README.txt

变更记录:http://www.kindsoft.net/editor/CHANGE.txt
注:文字类型必需为:utf-8
如何在GB2312编码下使用KindEditor?

此编辑器默认采用UTF-8格式。要改成GB2312格式,用任何带有编码转换功能的编辑器(UltraEdit等工具将它转化为ASCII编码即可,或者用 EditPlus等)把KindEditor.js文件格式转换成GB2312就可以。
若使用图片上传功能,upload程序也要改成GB2312。
或者包含KindEditor.js时指定charset。
<script type="text/javascript" charset="GB2312" src="[JS路径]/KindEditor.js"></script>
#######################################################################
#
# KindEditor 2.5 自述文件
#
#######################################################################

一 简单使用方法

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

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

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

<script type="text/javascript" charset="utf-8" src="[JS路径]/KindEditor.js"></script>
<script type="text/javascript">
var editor = new KindEditor("editor"); //创建编辑器对象
editor.hiddenName = "[原TEXTAREA名字]";
editor.editorWidth = "[编辑器宽度,例如:700px]";
editor.editorHeight = "[编辑器高度,例如:400px]";
editor.show(); //显示
//提交时获得最终HTML代码的函数
function KindSubmit() {
editor.data();
}
</script>
-----------------------------------------------------------------------

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时过滤Script脚本。
默认值:false

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

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

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

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

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

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

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

11. imageUploadCgi
上传图片的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

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

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

<script type="text/javascript" src="./KindEditor.js"></script>
<script type="text/javascript">
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.imageUploadCgi = "./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里。
}
</script>
-----------------------------------------------------------------------

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

1. Form结构

<form name="uploadForm" method="post" enctype="multipart/form-data" action="[imageUploadCgi指定的处理程序]">
更改后文件名<input type="hidden" name="fileName" value="">
文件<input type="file" name="fileData">
描述<input type="text" name="imgTitle" value="">
宽<input type="text" name="imgWidth" value="">
高<input type="text" name="imgHeight" value="">
边<input type="text" name="imgBorder" value="">
<select name="imgAlign">
<option value="">对齐方式</option>
</select>
横隔<input type="text" name="imgHspace" value="">
竖隔<input type="text" name="imgVspace" value="">
<input type="submit" name="button" value="确定">
</form>

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

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

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

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

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

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

四、风格制作方法
-----------------------------------------------------------------------
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';
-----------------------------------------------------------------------

分享到:
评论

相关推荐

    所见即所得html编辑器KindEditor3.1.2中文免费版.zip

    1. **所见即所得编辑模式**:KindEditor的核心特性是它的所见即所得编辑模式。用户可以直接在编辑区域输入文字、插入图片、设置格式,如加粗、斜体、下划线、字体颜色等,所有这些操作都会实时反映在预览区域,使得...

    开源HTML文本编辑器--KindEditor

    KindEditor是一套开源的HTML可视化编辑器,采用JavaScript编写,可以使用在Java、.NET、PHP、ASP程序中。 其中asp、asp.net、jsp、php四个文件夹为KindEditor在个程序中使用的代码说明;examples文件夹为KindEditor...

    比较不错的JS编辑器--kindeditor

    KindEditor是一款功能强大的JavaScript富文本编辑器,以其良好的可扩展性和通用性在Web开发领域备受推崇。这款编辑器提供了一套完整的解决方案,使得开发者能够轻松地在网页上实现文本编辑功能,包括创建、修改和...

    网页在线编辑器 kindeditor-4.1.9

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP...

    在线HTML编辑器 KindEditor已配置直接使用

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 该资源已配置可以直接使用...

    KindEditor在线编辑器

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、...

    KindEditor是一个轻量级的,开源(LGPL),跨浏览器的,基于Web的所见即所得的HTML编辑器

    1. **所见即所得**:用户在编辑器中看到的内容,会与最终发布到网页上的效果一致。这种直观的编辑方式使得非技术人员也能轻松上手,进行图文混排、格式调整等操作。 2. **跨浏览器支持**:KindEditor兼容主流的Web...

    html编辑器 kindeditor-4.0.4最新

    - `kindeditor.js` 和 `kindeditor-min.js` 是编辑器的主要脚本文件。前者是未压缩的源代码,方便调试和学习;后者是经过压缩的版本,适用于生产环境,以减少页面加载时间。 2. **语言支持**: - `lang` 目录包含...

    PyPI 官网下载 | django-kindeditor-0.2.0.tar.gz

    `django-kindeditor-0.2.0.tar.gz`是一个在PyPI上发布的Python库,特别设计用于Django框架,目的是为 Django 应用程序添加一个富文本编辑器——KindEditor。 **Django框架** Django是用Python编写的开源Web应用...

    在线编辑器kindeditor-3.5.4-zh_CN

    1. kindeditor.js 和 kindeditor-min.js:这两个JavaScript文件是编辑器的核心代码,其中kindeditor-min.js是经过压缩的版本,用于提高网页加载速度。 2. license.txt:包含了软件的授权协议信息,确保合法使用和...

    php-在线HTML编辑器:kindeditor、FCKeditor

    虽然标题和描述提到了KindEditor和FCKeditor这两种在线HTML编辑器,但实际内容并未涉及这两款编辑器的具体使用方法或者应用场景。因此,本篇总结将重点放在PHP操作MySQL数据库的基础流程、用户登录模块设计及其实现...

    kindeditor编辑器-封装

    KindEditor是一款功能强大的开源在线富文本编辑器,它支持多种浏览器环境,如IE6+、Firefox、Chrome、Safari和Opera等。这款编辑器提供了丰富的API接口,使得开发者能够轻松地进行自定义配置和功能扩展。在网页开发...

    富文本 文章在线编辑器kindeditor4x---加上layui版

    富文本在线编辑器是网页开发中常用的一种工具,它允许用户在浏览器中创建、编辑和格式化文本,类似于我们常见的Microsoft Word。KindEditor 4x 是一个开源的富文本编辑器,具有良好的跨平台性和易用性,适用于各种...

    KindEditor 可用于网站上获得所见即所得编辑效果

    kindeditor是一套开源的html可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容ie、 firefox、chrome、 safari、opera等主流浏览器。 kindeditor使用javascript编写,可以无缝的与java、.net、php、...

    富文本编辑器kindeditor-4.0.1

    富文本编辑器KindEditor-4.0.1是一款广泛应用在网页开发中的专业级富文本编辑组件。它以其功能强大、全面而闻名,为开发者提供了一种便捷的方式来创建和编辑具有格式化的文字内容,如HTML文档。这个编辑器适用于各种...

    kindeditor-3.4.4 HTML可视化编辑器

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写,可以无缝的与Java、.NET、PHP、...

    在线HTML编辑器(KindEditor) V4.1.10 中文正式版

    KindEditor是一款功能强大的在线HTML编辑器,其V4.1.10中文正式版为用户提供了一种简单易用的方式,让非技术用户也能在网站上方便地进行内容编辑,实现所见即所得(WYSIWYG)的效果。这款编辑器以其良好的跨浏览器...

    KindeditorHTML编辑器

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP...

    HTML可视化文本编辑器kindeditor-4.0.4

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、...

    二十一、商城 - 商品录入-KindEditor 编辑器(9)7.youlexuan.zip

    二十一、商城 - 商品录入-KindEditor 编辑器(9)7.youlexuan.zip

Global site tag (gtag.js) - Google Analytics