在PHP使用kindeditor

[版本說明:kindeditor-4.0.6(下載 https://code.google.com/p/kindeditor/downloads/list ),php-5.2.14+Zend Framework]

1.簡介
KindEditor 是一套開源的在線HTML編輯器,主要用於讓用戶在網站上得到所見即所得編輯效果,開發人員能夠用 KindEditor 把傳統的多行文本輸入框(textarea)替換爲可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫,能夠無縫地與 Java、.NET、PHP、ASP 等程序集成,比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。

主要特色
    快速:體積小,加載速度快
    開源:開放源代碼,高水平,高品質
    底層:內置自定義 DOM 類庫,精確操做 DOM
    擴展:基於插件的設計,全部功能都是插件,可根據需求增減功能
    風格:修改編輯器風格很是容易,只需修改一個 CSS 文件
    兼容:支持大部分主流瀏覽器,好比 IE、Firefox、Safari、Chrome、Opera

2.使用
下載後,解壓,在須要使用kindeditor的頁面加上如下代碼:
(注意:js/css的引入路徑必須填寫正確)
<link rel="stylesheet" href="/kindeditor-4.0.6/themes/default/default.css" />
<link rel="stylesheet" href="/kindeditor-4.0.6/plugins/code/prettify.css" />
<script charset="utf-8" src="/kindeditor-4.0.6/kindeditor.js"></script>
<script charset="utf-8" src="/kindeditor-4.0.6/lang/zh_CN.js"></script>
<script charset="utf-8" src="/kindeditor-4.0.6/plugins/code/prettify.js"></script>
<script>
    KindEditor.ready(function(K) {
        var editor1=K.create('textarea[name="description"]',{//name=form中textarea的name屬性
            cssPath : '/kindeditor-4.0.6/plugins/code/prettify.css',
            uploadJson : '/kindeditor-4.0.6/php/upload_json.php',
            fileManagerJson : '/kindeditor-4.0.6/php/file_manager_json.php',
            allowFileManager : true,
            afterCreate : function() {
                var self = this;
                K.ctrl(document, 13, function() {
                    self.sync();
                    K('form[name=myform]')[0].submit(); // name=form表單的name屬性
                });
                K.ctrl(self.edit.doc, 13, function() {
                    self.sync();
                    K('form[name=myform]')[0].submit(); // name=form表單的name屬性
                });
            }
        });
        prettyPrint();
    });
</script>
<form name="myform" method="post" action="根據實際填寫">
    <textarea name="description" style="width:700px;height:200px;">
    </textarea>
    <br />
    <input type="submit" name="button" value="提交內容" /> (提交快捷鍵: Ctrl + Enter)
</form>
最後在action中使用$_REQUEST['description']便可獲取到在文本編輯器中輸入的內容。


3.效果圖
php

在線例子
http://weizongwei.sinaapp.com/application/views/kindeditor1.php css

相關文章
相關標籤/搜索