编辑器使用方法
2. 部署编辑器
解压 kindeditor-x.x.x.zip 文件,将所有文件上传到您的网站程序目录里,例如:http://您的域名/editor/
Note
您可以根据需求删除以下目录后上传到服务器。
- asp - ASP程序
- asp.net - ASP.NET程序
- php - PHP程序
- jsp - JSP程序
- examples - 演示文件
3. 修改HTML页面
- 在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
<strong>HTML内容</strong>
</textarea>
Note
- id在当前页面必须是唯一的值。
- 在textarea里设置HTML内容即可实现编辑,在这里需要注意的是,如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容,则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序,目前支持ASP、ASP.NET、PHP、JSP。
- 在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。宽度和高度可用inline样式设置,也可用 编辑器初始化参数 设置。
- 在该HTML页面添加以下脚本。
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh_CN.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('#editor_id');
});
</script>
Note
- 第一个参数可用其它CSS选择器,匹配多个textarea时只在第一个元素上加载编辑器。
- 通过K.create函数的第二个参数,可以对编辑器进行配置,具体参数请参考 编辑器初始化参数 。
var options = {
cssPath : '/css/index.css',
filterMode : true
};
var editor = K.create('textarea[name="content"]', options);
4. 获取HTML数据
// 取得HTML内容
html = editor.html();
// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery
// 设置HTML内容
editor.html('HTML内容');
Note
- KindEditor的可视化操作在新创建的iframe上执行,代码模式下的textarea框也是新创建的,所以最后提交前需要将HTML数据同步到原来的textarea,editor.sync()函数会完成这个动作。
- KindEditor在默认情况下自动寻找textarea所属的form元素,找到form后onsubmit事件里添加sync函数,所以用form方式提交数据,不需要手动执行sync()函数。
分享到:
相关推荐
kindEditor编辑器使用方法_附带实际案例(asp下面的例子,php .net java下雷同)此方法主要讲述KindEditor编辑器无法获得提交的数据问题
自己用过的kindeditor,有自己写的简单的使用文档,希望对大家有帮助
Kindeditor的使用方法,你可能会用到的哦
KindEditor 是一套开源的在线... KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。 附带本人使用的说明书。
kindeditor最新版本的配置和使用入门、以及kindeditor读写数据库的方法、kindeditor的常见错误 kindeditor最新版本的配置和使用入门、以及kindeditor读写数据库的方法、kindeditor的常见错误
使用方法: 1. 解压zip文件,将所有文件复制到IIS的wwwroot/kindeditor目录下。 2. 将kindeditor/asp.net/bin目录下的dll文件复制到wwwroot/bin目录下。 3. 打开浏览器,输入http://localhost:[P0RT]/kindeditor/...
KindEditor使用说明 KindEditor各种属性方法介绍 KindEditor按钮控制
最新版KindEditor3.5.5使用攻略(.net C#),所有问题解决方法(包括图片上传中遇到的服务器发生错误,拒绝访问,标头有错误等问题的解决),自定义css的使用方法
KindEditor使用JavaScript编写,可以无缝的与Java、.NET、PHP、ASP等程序接合。 KindEditor 4.0 变更记录: 新增: 锚点功能。 新增: 增加loadStyleMode属性,默认情况下自动加载CSS文件。 新增: 编辑器对象增加...
kindeditor-4.0.6 使用方法
kindeditor粘贴word文档内容时去除格式的方法
kindeditor极容易在.net里面配置,本方法介绍上传文件盒图片,十分简单,通过测试,假如您觉得好的话,请给五分哦!
kindeditor控件完整代码,具体整合细节请参考网络kindeditor实用方法。希望能给各位带来方便。
使用方法: 1、复制kindEditor到你web工程的webContent下 2、复制struts需要的jar包和kindEditor必须jar包到lib下,因为它们的jar包邮重复,选择最新的就ok 3、如果需要后台java代码获取内容,可以在action中定义...
kindeditor图片上传后生成带域名绝对路径配置及提交空格无法保存解决方法。
* 备注信息: 上传部分自己总结的常用方法的封装,有不足和不完美之处,希望大家指出来,愿意一起 * 主要研究erp,cms,crm,b2b,oa等系统和网站的开发,欢迎有共同追求和学的IT人员一起学习和交流。 * 学习和讨论...
kindeditor编辑器使用方法!编辑器 下载 编辑器 免费下载
将kindeditor与ssm完美整合,如果你不是ssm框架,也没...Bugfix: [IE11] 有些设备报错不能显示,对象不支持attachEvent属性或方法。 Bugfix: retina屏幕上按钮裂开。 Bugfix: 编辑图片后点击插入图片,弹出两个dialog。
关于使用kindeditor实现在线编辑的初始化工作
最近在做几个项目都用到编辑器,我以前用eWebEditor,按照网上的方法也增加了FLV上传播放的功能。 这次想换个编辑器,看上了kindeditor。 使用过程中,发现上传FLV文件后不能自动播放,百度了几个修改的攻略,最后在...