快捷導(dǎo)航

KindEditor 4.x 在線編輯器常用方法小結(jié)

更新時(shí)間：2011年11月12日 15:45:21 作者：

要修改默認(rèn)后臺(tái)程序處理文件，修改plugins(插件文件夾)下的JavaScript內(nèi)容fileManagerJson改為自己使用程序語(yǔ)言

jQuery方式創(chuàng)建編輯器
KindEditor.create('#nr'); //綁定指定ID。
HTML部門(mén)
<textarea id="nr" style="width:680px;height:280px;visibility:visible"></textarea>
----------------------------------------------------------------------------------
allowFileManager 【是否允許瀏覽服務(wù)器已上傳文件】
默認(rèn)值是：false
------------------------------------------------------
allowImageUpload 【是否允許上傳本地圖片】
默認(rèn)值是：true
----------------------------------------------
allowFlashUpload 【是否允許上傳Flash】
默認(rèn)值是：true
----------------------------------------------
allowMediaUpload 【是否允許上傳多媒體文件】
默認(rèn)值是：true
------------------------------------------------
pasteType 【設(shè)置粘貼類(lèi)型】
0:禁止粘貼, 1:純文本粘貼, 2:HTML粘貼（默認(rèn)）
---------------------------------------------------
resizeType 【設(shè)置可否改變編輯器大小】
0:不能改變 1:只能改變高度 2:寬度和高度都可以改變（默認(rèn)）
----------------------------------------------------------
themeType 【主題風(fēng)格】
可設(shè)置"default"、"simple"，指定simple時(shí)需要引入simple.css
-------------------------------------------------------------
designMode 【可視化模式或代碼模式】
數(shù)據(jù)類(lèi)型：Boolean
默認(rèn)值是：true(可視化)
------------------------------------------
afterCreate:function(){} 【編輯器創(chuàng)建后】
afterCreate:function(){
//alert('創(chuàng)建完成');
}
------------------------------------------
fontSizeTable 【制定文字大小】
數(shù)據(jù)類(lèi)型：Array
默認(rèn)值：['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
-----------------------------------------------------------------------
colorTable 【指定取色器里的顏色值】
數(shù)據(jù)類(lèi)型：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']
]
上面是默認(rèn)值
----------------------------------------------------------------------------------
【Ctrl+Enter提交】
afterCreate:function(){
var self=this;
KindEditor.ctrl(self.edit.doc, 13, function() {
self.sync();
//執(zhí)行其他事件
});
}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
var editor=KindEditor.create('#nr');
【編輯器獲取焦點(diǎn)】
editor.focus();
【取得編輯器HTML內(nèi)容】
var html=editor.html();
【取得編輯器純文本內(nèi)容】
var text=editor.text();
【移除編輯器】
editor.remove();
【設(shè)置編輯器HTML】
editor.html('<strong>編輯器內(nèi)容</strong>');
【設(shè)置編輯器純文本內(nèi)容，直接顯示HTML代碼】
editor.text('<strong>編輯器內(nèi)容</strong>');
【判斷編輯器內(nèi)容是否為空】
if(editor.isEmpty()){
alert('請(qǐng)輸入內(nèi)容');
return false;
}
【將指定的HTML內(nèi)容插入到編輯器區(qū)域里的光標(biāo)處】
editor.insertHtml('<strong>插入內(nèi)容</strong>');
【將指定的HTML內(nèi)容添加到編輯器區(qū)域的最后位置。】
editor.appendHtml('<strong>追加內(nèi)容</strong>');
【編輯器切換全屏模式】
editor.fullscreen();
【設(shè)置編輯器的只讀狀態(tài)】
editor.readonly(false); //true:只讀，false:取消只讀
==================================================================================
【瀏覽服務(wù)器】選擇已上傳的文件
① 必須先引用編輯器的default.css文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 必須引用一下兩個(gè)JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
<script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
③ 具體實(shí)現(xiàn)方法

復(fù)制代碼代碼如下:

<script type="text/javascript"> 
$(function(){ 
var editor = KindEditor.editor(); 
$('#filemanager').click(function() { 
editor.loadPlugin('filemanager', function() { //加載插件 
editor.plugin.filemanagerDialog({ 
viewType : 'VIEW', //顯示方式，有兩種分別是VIEW（縮略圖）和LIST（詳細(xì)信息） 
dirName : 'image', 
//選擇查看的指定文件夾下的文件【包括子目錄下的文件】，默認(rèn)只能是image,flash,media,file四種，如需添加自定義文件夾，可修改例如：asp/file_manager_json.asp文件第40行。 
clickFn : function(url, title) { //選擇玩文件后執(zhí)行下面的代碼 
$('#url').val(url); 
editor.hideDialog(); //隱藏瀏覽服務(wù)器對(duì)話框 
} 
}); 
}); 
}); 
}); 
</script>

【上傳本地文件到服務(wù)器】
① 引用CSS文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 引用編輯器JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
③ 具體實(shí)現(xiàn)方法

復(fù)制代碼代碼如下:

<script type="text/javascript"> 
$(function(){ 
var uploadbutton = KindEditor.uploadbutton({ 
button : KindEditor('#upload'), //注意此處，不能使用jQuery的$ 
fieldName : 'imgFile', //不要修改 
url : '../Editor/asp/upload_json.asp?dir=file', 
//上傳處理程序頁(yè)面，dir參數(shù)有四種:flash,media,file,其他（圖片），上傳后綴限制可修改程序頁(yè)面代碼，如：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('上傳發(fā)送錯(cuò)誤！'); 
//如果需要顯示錯(cuò)誤信息，可設(shè)置如alert('發(fā)生錯(cuò)誤：'+str);，如不需顯示可將上面str刪除 
} 
}); 
uploadbutton.fileBox.change(function(e) { 
uploadbutton.submit(); 
}); 
}); 
</script> 

【上傳圖片】包括選擇服務(wù)器已上傳的圖片
① 引用CSS文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 引用編輯器JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
③ 引用語(yǔ)言包文件，必須的
<script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
④ 具體實(shí)現(xiàn)方法

復(fù)制代碼代碼如下:

<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); //可使用其他參數(shù)。 
editor.hideDialog(); 
} 
}); 
}); 
}); 
}); 
</script> 