首页 > 开发 > 综合 > 正文

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

2024-07-21 02:53:56
字体:
来源:转载
供稿:网友
要修改默认后台程序处理文件,修改plugins(插件文件夹)下的JavaScript内容fileManagerJson改为自己使用程序语言
 
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


注:相关教程知识阅读请移步到编辑器频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表