KindEditor 一款好用的HTML可視化編輯器（富文本編輯器）

　　KindEditor使用JavaScript編寫，能夠無縫的於Java、.NET、PHP、ASP等程序接合。 KindEditor很是適合在CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用，2006年7月首次發佈2.0以來，KindEditor依靠出色的用戶體驗和領先的技術不斷擴大編輯器市場佔有率，目前在國內已經成爲最受歡迎的編輯器之一。

---以上內容來自百度百科

---

怎麼用呢？

1. 1. 下載kindeditor　　官網下載地址在這裏
   2. 下載完成後，解壓完並放入本身的項目中，目錄結構如圖：
   3. 初始化kindeditor富文本編輯器
      • 首先先導入下面css和js文件（路徑須要根據本身項目的實際路徑寫）
        • 　　

          1 <link rel="stylesheet" href="../resources/kindeditor/themes/default/default.css" />
          2 <link rel="stylesheet" href="../resources/kindeditor/plugins/code/prettify.css" />
          3 <script charset="utf-8" src="../resources/kindeditor/kindeditor-all.js"></script>
          4 <script charset="utf-8" src="../resources/kindeditor/lang/zh-CN.js"></script>
          5 <script charset="utf-8" src="../resources/kindeditor/plugins/code/prettify.js"></script>

           

      • 而後初始化（textarea 爲富文本編輯器主題，script代碼初始化）
        • • 　　

             1 <script type="text/javascript">
             2          var editor;  3         KindEditor.ready(function(K) {  4             editor = K.create('textarea[name="你的textareaid名"]', {  5                 uploadJson : '../resources/kindeditor/jsp/upload_json.jsp',//指定上傳圖片的服務器端程序。默認值：../../php/upload_json.php。
             6                 resizeType : 1,//2時能夠拖動改變寬度和高度,1時只能改變高度,0時不能拖動。
             7                 allowImageUpload : true,//是否支持本地上傳圖片。
             8                 allowImageRemote : false,//是否支持網絡圖片。
             9                 afterUpload:function(url,data,name){},//文件上傳完的回調函數，可在裏面寫方法調節圖片顯示大小。
            10                 items : []//配置編輯器的工具欄，其中"-"表示換行，"|"表示分隔符。
            11  }); 12  }); 13 </script>
            
            

            1 items默認值： 2 ['source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste', 3 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 4 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 5 'superscript', '|', 'selectall', '-', 6 'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 7 'italic', 'underline', 'strikethrough', 'removeformat', '|', 'image', 8 'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about']

             

            關與kindeditor上傳圖片我想寫幾句 (*^▽^*)
            當在jsp頁面中開發的時候，須要更改 kindeditor\plugins\image\image.js 文件中的 第16行 紅色標註的地方（默認值: ‘php/upload_json.php'）

            1 uploadJson = K.undef(self.uploadJson, self.basePath + 'jsp/upload_json.jsp'),

             1 //編輯器初始化參數
             2 width//編輯器的寬度，能夠設置px或%，比textarea輸入框樣式表寬度優先度高。
             3 height//編輯器的高度，只能設置px，比textarea輸入框樣式表高度優先度高。
             4 minWidth//指定編輯器最小寬度，單位爲px。
             5 minHeight//指定編輯器最小高度，單位爲px。
             6 items//配置編輯器的工具欄，其中」/」表示換行，」|」表示分隔符。
             7 noDisableItems//designMode 爲false時，要保留的工具欄圖標。
             8 filterMode//true時根據 htmlTags 過濾HTML代碼，false時容許輸入任何代碼。
             9 htmlTags//指定要保留的HTML標記和屬性。Object的key爲HTML標籤名，value爲HTML屬性數組，」.」開始的屬性表示style屬性。
            10 wellFormatMode//true時美化HTML數據。
            11 resizeType//2或1或0，2時能夠拖動改變寬度和高度，1時只能改變高度，0時不能拖動。
            12 themeType//指定主題風格，可設置」default」、」simple」，指定simple時須要引入simple.css。
            13 langType//指定語言，可設置」en」、」zh-CN」，須要引入lang/[langType].js。
            14 designMode//可視化模式或代碼模式
            15 fullscreenMode//true時加載編輯器後變成全屏模式。
            16 basePath//指定編輯器的根目錄路徑。
            17 themesPath//指定編輯器的themes目錄路徑。
            18 pluginsPath//指定編輯器的plugins目錄路徑。
            19 langPath//指定編輯器的lang目錄路徑。
            20 minChangeSize//undo/redo文字輸入最小變化長度，當輸入的文字變化小於這個長度時不會添加到undo記錄裏。
            21 urlType//改變站內本地URL，可設置」「、」relative」、」absolute」、」domain」。空爲不修改URL，relative爲相對路徑，absolute爲絕對路徑，domain爲帶域名的絕對路徑。
            22 newlineTag//設置回車換行標籤，可設置」p」、」br」。
            23 pasteType//設置粘貼類型，0:禁止粘貼, 1:純文本粘貼, 2:HTML粘貼
            24 dialogAlignType//設置彈出框(dialog)的對齊類型，可設置」「、」page」，指定page時按當前頁面居中，指定空時按編輯器居中。
            25 shadowMode//true時彈出層(dialog)顯示陰影。
            26 zIndex//指定彈出層的基準z-index。
            27 useContextmenu//true時使用右鍵菜單，false時屏蔽右鍵菜單。
            28 syncType//同步數據的方式，可設置」「、」form」，值爲form時提交form時自動同步，空時不會自動同步。
            29 indentChar//wellFormatMode 爲true時，HTML代碼縮進字符。
            30 cssPath//指定編輯器iframe document的CSS文件，用於設置可視化區域的樣式。
            31 cssData//指定編輯器iframe document的CSS數據，用於設置可視化區域的樣式。
            32 bodyClass//指定編輯器iframe document body的className。
            33 colorTable//指定取色器裏的顏色。
            34 afterCreate//設置編輯器建立後執行的回調函數。
            35 afterChange//編輯器內容發生變化後執行的回調函數。
            36 afterTab//按下TAB鍵後執行的的回調函數。
            37 afterFocus//編輯器聚焦(focus)時執行的回調函數。
            38 afterBlur//編輯器失去焦點(blur)時執行的回調函數。
            39 afterUpload    //上傳文件後執行的回調函數。
            40 uploadJson//指定上傳文件的服務器端程序。
            41 fileManagerJson//指定瀏覽遠程圖片的服務器端程序。
            42 allowPreviewEmoticons//true時鼠標放在表情上能夠預覽表情。
            43 allowImageUpload//示圖片上傳按鈕（是否支持本地圖片上傳）
            44 allowFlashUpload//true時顯示Flash上傳按鈕。
            45 allowMediaUpload//true時顯示視音頻上傳按鈕。
            46 allowFileUpload//true時顯示文件上傳按鈕。
            47 allowFileManager//是否顯示瀏覽遠程服務器按鈕
            48 fontSizeTable//指定文字大小。['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
            49 imageTabIndex//圖片彈出層的默認顯示標籤索引
            50 formatUploadUrl//是否自動格式化上傳後的URL。
            51 fullscreenShortcut//false時禁用ESC全屏快捷鍵。
            52 extraFileUploadParams//上傳圖片、Flash、視音頻、文件時，支持添加別的參數一併傳到服務器。
            53 filePostName//指定上傳文件form名稱。
            54 fillDescAfterUploadImage//true時圖片上傳成功後切換到圖片編輯標籤，false時插入圖片後關閉彈出框。
            55 afterSelectFile//從圖片空間選擇文件後執行的回調函數。
            56 pagebreakHtml//可指定分頁符HTML。
            57 allowImageRemote//顯示網絡圖片標籤（是否支持網絡圖片）
            58 autoHeightMode//值爲true，並引入autoheight.js插件時自動調整高度。
            59 fixToolBar//值爲true，並引入fixtoolbar.js插件時固定工具欄位置。
            詳情參考這裏
            
            

             

             

             

      • 當以上配置好以後，咱們打開頁面，就能夠出現本身配置的富文本框啦 (*^▽^*)

   1 <link rel="stylesheet" href="../resources/kindeditor/themes/default/default.css" />
   2 <link rel="stylesheet" href="../resources/kindeditor/plugins/code/prettify.css" />
   3 <script charset="utf-8" src="../resources/kindeditor/kindeditor-all.js"></script>
   4 <script charset="utf-8" src="../resources/kindeditor/lang/zh-CN.js"></script>
   5 <script charset="utf-8" src="../resources/kindeditor/plugins/code/prettify.js"></scri