KindEditor 是一套開源的在線HTML編輯器,主要用於讓用戶在網站上得到所見即所得編輯效果,開發人員能夠用 KindEditor 把傳統的多行文本輸入框(textarea)替換爲可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫,能夠無縫地與 Java、.NET、PHP、ASP 等程序集成,比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。 javascript
官網: http://kindeditor.net/about.phpphp
其餘經常使用的富文本編輯器:css
UEditor http://ueditor.baidu.com/website/html
CKEditor http://ckeditor.com/java
有興趣的小夥伴能夠找時間探索一下哦!web
從官網下載好文檔以後,將相關文件導入到咱們的項目中,以下圖;並在須要富文本編輯框的頁面中引入相應的文件。服務器
<!-- 富文本編輯器 --> <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>
在頁面添加javaScript代碼初始化KindEditor編輯器,並在頁面富文本編輯處指定name屬性完成初始化!微信
//初始化KindEditor編輯器 <script type="text/javascript"> var editor; KindEditor.ready(function (K) { editor = K.create('textarea[name="content"]', { //否容許瀏覽服務器已上傳文件,默認是false allowFileManager: true }); }); </script> // html 頁面 :爲普通的textarea指定name屬性便可(和js中一致)! <div class="col-md-10 data editer"> <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea> </div>
//提取編輯器內容 var content = =editor.html(); //清空編輯器內容 editor.html('');
---------------------------------------------------------------------------------- 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:取消只讀
關注微信公衆號,隨時隨地學習app