KindEditor的安裝和使用

 

KindEditor的安裝和使用

由於想要作一個能夠發表格式化文章的網站，因此我須要一個網頁版的所見即所得的文本編輯器。而KindEditor就是這麼一個開源的文本編輯器。 

這篇文章也是我大概接觸了KindEditor並用它作了一點點東西后總結出來的一點心得，固然，想要全面的介紹，或詳細的文檔，仍是要去官方吧（http://kindeditor.net/）。由於是國產軟件（應該是國產的吧？），因此官網是中文的，蠻好的。

貌似Google一下KindEditor，則能夠找到各類語言的安裝方法，Java也好PHP也好不少的。因此我不想介紹特定語言的安裝方法，由於我以爲KindEditor只是個前端的文本編輯器，爲何要和後臺所用的語言扯上關係呢？例如Java語言的安裝會告訴你把這幾個jar包裝好，你要不用Java，這種安裝方法毫無心義。好比我作KindEditor的時候用的就是Ruby on Rails，翻了翻好像沒有特別針對Ruby on Rails的安裝方法。

因而就寫一個通用安裝方法吧，只要是Web項目均可以這麼搞。 

KindEditor的編輯區是以一個textarea爲原型，所以，最後變成html應該大概是個這樣子。

<textarea id="editor_id" name="content" style="width:700px;height:300px;">
   內容
</textarea>

至於內容，則是一開是打開這個網頁所看到的初始內容，內容支持格式化。若是什麼也沒有就留空好了。若是要設置內容的話，JSP的話大概寫個EL表達式，Rails的erb文件的話，寫<%= XXX %>之類的就能夠了。

以後，就要把這個textarea變成KindEditor演示頁面中那個樣子了。

首先，你應該下載KindEditor，從官網上下載。下載完應該是一個zip包什麼的，解壓縮出來之後在你的Web項目中本身找一個喜歡的路徑解壓縮。可是官方會告訴你若是你是Java應該如何如何，你是PHP應該如何如何。別理這個，你要用個Ruby on Rails 什麼的他也沒告訴怎麼安裝難道你就不能安裝了啊？反正看看zip包裏這些文件夾裏有些什麼吧。若是是js文件或css文件確定是必要的。若是叫作Java或PHP你就刪了吧。

反正把KindEditor安裝在用戶能夠訪問到的地址就好了。例如Java的話就是WebRoot，我用Rails就是public目錄。

以後，在你的文本編輯器出現的頁面里加上：

<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>

其中#editor_id是你定義的textarea的ID。

你要以爲把JS直接寫網頁了很差的話寫js文件裏也同樣，一個意思就行。哦對了，記得這兩行腳本必定也要添加上去（添加到以前的script標籤前面）。

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh_CN.js"></script>

其中src根據具體項目而頂，反正能指向這兩個js文件就好了。

以後打開你的網頁，若是一切順利的話，就能看到官方演示頁面裏那個東西了。你在編輯器內輸入文本，能夠編輯字號什麼的，還能夠設置字體，還能夠排版。

好了，如何將編輯器裏的內容提交到服務器呢？其實整個KindEditor編輯器就是一個textarea變來的，你直接按照提交textarea的方式就能夠了。

只不過有一點必定要注意，在提交到服務器前要將textarea的內容同步。

要調用editor.sync();就ok了。其中editor就是你的那個textarea，用jquery取id就能夠取到該變量了。雖然我不調用貌似也能正常提交，可是官方文檔說必定要同步，因此記得必定要調用該方法再提交。

KindEditor的安裝和使用