今天群里的朋友問我能不能寫個kindEditor編輯器的使用教程，說是弄了半天沒有搞定。由于PHP啦后臺正好用了這個編輯器，我有寫經(jīng)驗，正好教他的同時寫出來分享給大家
kindEditor編輯器是一個由JS寫成的在線編輯器，很多網(wǎng)站或CMS等都有用它，口碑不錯，目前最新版本是4.1.10。
其實它的用法非常簡單，我是在下載了它的安裝包后看了一些demo然后就把它放到PHP啦的后臺上去了。好了教程正式開始
一、下載
下載最新版本的kindEditor（官方網(wǎng)站kindeditor.net），下載后打開examples/index.html 就可以看到一排例子。
二、部署
將解壓后的文件包kindeditor-4.1.10里的asp asp.net jsp php這幾個帶有服務(wù)端腳本的文件夾刪除，然后上傳到你網(wǎng)站的相應(yīng)目錄中，在這里我假設(shè)放到了plugin目錄。
三、嵌入
在需要加入編輯器的頁面的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> |
然后添加一個輸入框
1 | <textarea id="editor_id" name="content"></textarea> |
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的第一個參數(shù)就是前面textarea的ID，后面跟的JSON格式的數(shù)據(jù)保護了該編輯器的很多功能。比如我代碼上寫的
cssPath是代碼樣式表，uploadJson是編輯器的圖片上傳組件的上傳地址。
說到上傳地址，大家應(yīng)該還記的在上傳服務(wù)器之前我叫大家先刪掉的幾個文件夾吧，選擇你的網(wǎng)站的開發(fā)語言的目錄你可以看到如PHP目錄下的upload_json.php文件，它里面主要寫了接受圖片上傳的方法，大家可以改改自己用。后臺部分的東西這里就不細講了。
四、取值
編輯器嵌入完成后我們?nèi)绾稳≈的?？其實它的包里也有例字，那就?nbsp; 用editor.html()方法來取值。
好了主要的用法介紹完了，它還有很多不常用功能，我就不說了，多看看例子我相信大家都會用的。
