KindEditor 4.x 在线编辑器常用方法小结

所属分类: 网络编程 / 网页编辑器 阅读数: 1022
收藏 0 赞 0 分享
jQuery方式创建编辑器
KindEditor.create('#nr'); //绑定指定ID。
HTML部门
<textarea id="nr" style="width:680px;height:280px;visibility:visible"></textarea>
----------------------------------------------------------------------------------
allowFileManager 【是否允许浏览服务器已上传文件】
默认值是:false
------------------------------------------------------
allowImageUpload 【是否允许上传本地图片】
默认值是:true
----------------------------------------------
allowFlashUpload 【是否允许上传Flash】
默认值是:true
----------------------------------------------
allowMediaUpload 【是否允许上传多媒体文件】
默认值是:true
------------------------------------------------
pasteType 【设置粘贴类型】
0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴(默认)
---------------------------------------------------
resizeType 【设置可否改变编辑器大小】
0:不能改变 1:只能改变高度 2:宽度和高度都可以改变(默认)
----------------------------------------------------------
themeType 【主题风格】
可设置"default"、"simple",指定simple时需要引入simple.css
-------------------------------------------------------------
designMode 【可视化模式或代码模式】
数据类型:Boolean
默认值是:true(可视化)
------------------------------------------
afterCreate:function(){} 【编辑器创建后】
afterCreate:function(){
//alert('创建完成');
}
------------------------------------------
fontSizeTable 【制定文字大小】
数据类型:Array
默认值:['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
-----------------------------------------------------------------------
colorTable 【指定取色器里的颜色值】
数据类型:Array
[
['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],
['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],
['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],
['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']
]
上面是默认值
----------------------------------------------------------------------------------
【Ctrl+Enter提交】
afterCreate:function(){
var self=this;
KindEditor.ctrl(self.edit.doc, 13, function() {
self.sync();
//执行其他事件
});
}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
var editor=KindEditor.create('#nr');
【编辑器获取焦点】
editor.focus();
【取得编辑器HTML内容】
var html=editor.html();
【取得编辑器纯文本内容】
var text=editor.text();
【移除编辑器】
editor.remove();
【设置编辑器HTML】
editor.html('<strong>编辑器内容</strong>');
【设置编辑器纯文本内容,直接显示HTML代码】
editor.text('<strong>编辑器内容</strong>');
【判断编辑器内容是否为空】
if(editor.isEmpty()){
alert('请输入内容');
return false;
}
【将指定的HTML内容插入到编辑器区域里的光标处】
editor.insertHtml('<strong>插入内容</strong>');
【将指定的HTML内容添加到编辑器区域的最后位置。】
editor.appendHtml('<strong>追加内容</strong>');
【编辑器切换全屏模式】
editor.fullscreen();
【设置编辑器的只读状态】
editor.readonly(false); //true:只读,false:取消只读
==================================================================================
【浏览服务器】选择已上传的文件
① 必须先引用编辑器的default.css文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 必须引用一下两个JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
<script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
③ 具体实现方法 
复制代码 代码如下:

<script type="text/javascript">
$(function(){
var editor = KindEditor.editor();
$('#filemanager').click(function() {
editor.loadPlugin('filemanager', function() { //加载插件
editor.plugin.filemanagerDialog({
viewType : 'VIEW', //显示方式,有两种分别是VIEW(缩略图)和LIST(详细信息)
dirName : 'image',
//选择查看的指定文件夹下的文件【包括子目录下的文件】,默认只能是image,flash,media,file四种,如需添加自定义文件夹,可修改例如:asp/file_manager_json.asp文件第40行。
clickFn : function(url, title) { //选择玩文件后执行下面的代码
$('#url').val(url);
editor.hideDialog(); //隐藏浏览服务器对话框
}
});
});
});
});
</script>

【上传本地文件到服务器】
① 引用CSS文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 引用编辑器JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
③ 具体实现方法
复制代码 代码如下:

<script type="text/javascript">
$(function(){
var uploadbutton = KindEditor.uploadbutton({
button : KindEditor('#upload'), //注意此处,不能使用jQuery的$
fieldName : 'imgFile', //不要修改
url : '../Editor/asp/upload_json.asp?dir=file',
//上传处理程序页面,dir参数有四种:flash,media,file,其他(图片),上传后缀限制可修改程序页面代码,如:upload_json.asp
afterUpload : function(data) {
if (data.error === 0) {
var url = KindEditor.formatUrl(data.url, 'absolute');
$('#url').val(url);
} else {
alert(data.message);
}
},
afterError : function(str) {
alert('上传发送错误!');
//如果需要显示错误信息,可设置如alert('发生错误:'+str);,如不需显示可将上面str删除
}
});
uploadbutton.fileBox.change(function(e) {
uploadbutton.submit();
});
});
</script>

【上传图片】包括选择服务器已上传的图片
① 引用CSS文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 引用编辑器JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
③ 引用语言包文件,必须的
<script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
④ 具体实现方法
复制代码 代码如下:

<script type="text/javascript">
$(function(){
var editor = KindEditor.editor({
allowFileManager : true //允许选择已上传的图片
});
$('#image').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
imageUrl : $('#url').val(),
clickFn : function(url, title, width, height, border, align) {
$('#url').val(url); //可使用其他参数。
editor.hideDialog();
}
});
});
});
});
</script>

http://www.cnblogs.com/edielei/archive/2011/11/12/2246450.html
更多精彩内容其他人还在看

在asp.net中KindEditor编辑器的使用方法小结

由于国外的服务器好象对一些要引用dll编辑器由于安全问题,锁定了web.config中的一些权限,在先试了FreeTexbox不行,FCKEditor也不行,因为都是要引用dll文件,最后同事介绍一款 纯js的kindeditor编辑器,
收藏 0 赞 0 分享

FCK判断内容是否为空(如果只是去空格,那么这种方式是错误的)

一般来说,像input里面的值都可以通过将内容去空格判断是否为空,但是FCK没那么简单,因为当你多打几个空格或者多打一些回车,它会自动地生成一些<p>标签,如果再用原先去空格判断的方法,显然是不可取的。
收藏 0 赞 0 分享

当使用ckeditor控件时,需要校验输入内容是否为空的一种解决办法(转帖)

这样是我们写程序中最经常的写法 提交之前进行验证内容是否为空!
收藏 0 赞 0 分享

FCKeditorAPI 手册 js操作获取等

FCKeditorAPI 手册 js操作控制,获取等函数代码,使用网页编辑器的朋友可以参考下。
收藏 0 赞 0 分享

autogrow 让FCKeditor高度随内容增加的插件

让FCKeditor高度随内容增加的插件,这个插件在默认情况下可能运行不正常,必须做一点修改才可以。
收藏 0 赞 0 分享

自己打造HTML在线编辑器的实现难点分析

到目前为止,我已经开发了两个HTML编辑器了,一个用在公司的CMS项目,另一个用在这个Blog(TidyEditor,暂时没有单独发布)。下面总结一下开发的难点以及应对方法。
收藏 0 赞 0 分享

常用网页编辑器漏洞手册(全面版)fckeditor,ewebeditor

常用网页编辑器漏洞手册(全面版)fckeditor,ewebeditor,使用这类编辑器的朋友一定要注意下。
收藏 0 赞 0 分享

myFocus 一个KindEditor的焦点图插件

使用KindEditor(富文本编辑器)提供的接口将myFocus(焦点图库)集成在KindEditor上
收藏 0 赞 0 分享

通过Fckeditor把图片上传到独立图片服务器的方法

大部分网站的后台,都是把图片上传到本地服务器上,但图片也消耗很多带宽,门户网站都有单独的图片服务器,怎么实现呢?
收藏 0 赞 0 分享

eWebEditor 辑器按钮失效 IE8下eWebEditor编辑器无法使用的解决方法

最近我把IE浏览器更新到了IE8.0,在用eWebEditor在线HTML文本编辑器的时候点击eWebEditor上的所有编辑按钮都没用,只看到浏览器状态栏左下角显示网页上有错误,于是上网查了一下。终于找到解决的方法,测试后正常。
收藏 0 赞 0 分享
查看更多