1. 程式人生 > >KindEditor:富文字編輯器介紹

KindEditor:富文字編輯器介紹

富文字編輯器介紹

富文字編輯器,Rich Text Editor, 簡稱 RTE, 它提供類似於 Microsoft Word 的編輯功能。常用的富文字編輯器
KindEditor http://kindeditor.net/
UEditor http://ueditor.baidu.com/website/
CKEditor http://ckeditor.com/


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(‘編輯器內容’);
【設定編輯器純文字內容,直接顯示HTML程式碼】
editor.text(‘編輯器內容’);
【判斷編輯器內容是否為空】
if(editor.isEmpty()){
alert(‘請輸入內容’);
return false;
}
【將指定的HTML內容插入到編輯器區域裡的游標處】
editor.insertHtml(‘插入內容’);
【將指定的HTML內容新增到編輯器區域的最後位置。】
editor.appendHtml(‘追加內容’);
【編輯器切換全屏模式】
editor.fullscreen();
【設定編輯器的只讀狀態】
editor.readonly(false); //true:只讀,false:取消只讀