KingEditor富文字編輯器的使用
阿新 • • 發佈:2018-11-09
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:取消只讀