詳細介紹如何使用kindEditor編輯器

今天羣裏的朋友問我能不能寫個kindEditor編輯器的使用教程，說是弄了半天沒有搞定。因爲PHP啦後臺正好用了這個編輯器，我有寫經驗，正好教他的同時寫出來分享給你們。php

kindEditor編輯器是一個由JS寫成的在線編輯器，不少網站或CMS等都有用它，口碑不錯，目前最新版本是4.1.10。css

其實它的用法很是簡單，我是在下載了它的安裝包後看了一些demo而後就把它放到PHP啦的後臺上去了。好了教程正式開始html

1、下載json

下載最新版本的kindEditor（官方網站kindeditor.net），下載後打開examples/index.html 就能夠看到一排例子。服務器

2、部署asp.net

將解壓後的文件包kindeditor-4.1.10裏的asp asp.net jsp php這幾個帶有服務端腳本的文件夾刪除，而後上傳到你網站的相應目錄中，在這裏我假設放到了plugin目錄。jsp

3、嵌入編輯器

在須要加入編輯器的頁面的HTML中倒入網站

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

而後添加一個輸入框spa

 
       1 
       <textarea id="editor_id" name="content"></textarea>

最後在加入一段JS

 
       1 
       KindEditor.ready(function(K) { 
      
       2 
           window.editor = K.create('#editor_id',{ 
      
       3 
               cssPath:'/public/plugin/editor/plugins/code/prettify.css', 
      
       4 
               uploadJson:'/upload/image.php', 
      
       5 
               resizeType :1, 
      
       6 
               allowPreviewEmoticons : true, 
      
       7 
               allowImageUpload : true, 
      
       8 
             }); 
      
       9 
       });

好了。到這裏你應該已經能夠看頁面上的編輯器了。

這裏我還要說的一點是 K.create的第一個參數就是前面textarea的ID，後面跟的JSON格式的數據保護了該編輯器的不少功能。好比我代碼上寫的

cssPath是代碼樣式表，uploadJson是編輯器的圖片上傳組件的上傳地址。

說到上傳地址，你們應該還記的在上傳服務器以前我叫你們先刪掉的幾個文件夾吧，選擇你的網站的開發語言的目錄你能夠看到如PHP目錄下的upload_json.php文件，它裏面主要寫了接受圖片上傳的方法，你們能夠改改本身用。後臺部分的東西這裏就不細講了。

4、取值

編輯器嵌入完成後咱們如何取值呢？其實它的包裏也有例字，那就是用editor.html()方法來取值。

好了主要的用法介紹完了，它還有不少不經常使用功能，我就不說了，多看看例子我相信你們都會用的。

另外還有【kindeditor編輯器使用SyntaxHighlighter實現代碼高亮】