1. 程式人生 > >KingEditor富文字編輯器的使用

KingEditor富文字編輯器的使用

1、KingEditor相關js、css檔案資源位置:

連結:https://pan.baidu.com/s/123RDPWdb7Aim5854kQmelg

提取碼:p64n

2、使用步驟:

a).在頁面引入相關資源

  <link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
  <script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
  <script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

b).初始化一個kingEditor物件

   <script type="text/javascript">

		var editor;
		KindEditor.ready(function(K) {
			editor = K.create('textarea[name="content"]', {
				allowFileManager : true			--這個表示是否允許瀏覽伺服器已上傳的檔案,預設是false,這裡可以配置多個,用逗號隔開
			});
		});

	</script>

c).提取內容:editor.html();

d).清空內容:editor.html(’’);

3、初始化kingeditor物件時可以配置的屬性列表:


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:取消只讀