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

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