kindeditor整合進yii框架

/**
 * kindeditor
 * 源文件       :   www/js/kindeditor/
 * 功能         :   富文本編輯器，優於ckeditor，支持多種顯示插入代碼的樣式。
 * 形式         :   現以components的方式整合到yii中(修改自其自帶的php demo)
 * 目錄         :   www/protected/componts/editor/          (整合進yii後的基礎目錄)
 *                  www/protected/componts/editor.php       (接口文件)
 *                  www/js/kindeditor/                      (源文件路徑)
 *                  www/protected/controllers/EditoruploadController.php    (處理文件的調用地址)
 * 案例         :   www/protected/views/post/_form.php

 */

首先根據kindeditor的demo中的例子，將kindeditor添加到表單中：

<div class="row">
        <?php echo $form->labelEx($model, 'content'); ?>
        <?php echo CHtml::activeTextArea($model, 'content', array('id'=>'editor_id')); ?>
        <?php echo $form->error($model, 'content'); ?>
    </div>
    <script src='<?php echo Yii::app()->baseUrl; ?>/js/kindeditor/kindeditor.js'></script>
    <script charset="utf-8" src="<?php echo Yii::app()->baseUrl; ?>/js/kindeditor/lang/zh_CN.js"></script>
    <script>
        KindEditor.ready(function(K) {
            var editor1 = K.create('#editor_id', {    //editor是替換的對象
		resizeType : 2,
		urlType: 'domain',
		shadowMode : false,
                height : '600px',
                cssPath : '<?php echo Yii::app()->baseUrl; ?>/css/main.css',    //編輯界面中的樣式
                uploadJson : '<?php echo Yii::app()->createUrl("editorupload/uploadJson"); ?>',    //上傳文件的處理地址
                fileManagerJson : '<?php echo Yii::app()->createUrl("editorupload/fileManageJson"); ?>',    //管理上傳文件的地址
                allowFileManager : true,    //容許瀏覽上傳的文件
                afterCreate : function() {
                    var self = this;
                    K.ctrl(document, 13, function() {
                        self.sync();
                        K('#eform')[0].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function() {
                        self.sync();
                        K('#eform')[0].submit();
                    });
                },
		afterChange : function() {
			this.sync();
		}
            });
        });
    </script>

至此，表單中已經能夠看到kindeditor的編輯框了 ，提交一段內容後確實是有樣式；

大功告成？_？；No！No！不要認爲這樣就能夠了， ，真正要作的纔剛剛開始：

最主要的是實現上傳文件的功能 和 代碼高亮顯示（上一篇文章已經講解過了）。

下一步要作的就是實現上傳文件的功能。

能夠看到上面的代碼中的uploadJson/fileManagerJson的參數已經換成yii的url，這裏就要建立這兩個action了。

demo中的file_manager_json.php和upload_json.php這兩個文件正好對應兩個action。JSON.php這個文件是基礎文件。

首先將這兩個文件改形成類文件，複製到www/protected/components/editor文件夾裏面，還有JSON.php，並做以下修改：

require_once 'JSON.php';

class fileManagerjson {

    public $php_path = '';
    public $php_url = '';

    public function __construct($php_path, $php_url) {
        $this->php_path = $php_path;
        $this->php_url = $php_url;
    }

    public function fileManager() {
        $php_path = $this->php_path;
        $php_url = $this->php_url;

//根目錄路徑，能夠指定絕對路徑，好比 /var/www/attached/
        $root_path = $php_path . '/../attached/';
//根目錄URL，能夠指定絕對路徑，好比 http://www.yoursite.com/attached/
        $root_url = $php_url . '/attached/';

require_once 'JSON.php';

class uploadJson{

    public $php_path = '';
    public $php_url = '';

    public function __construct($php_path, $php_url) {
        $this->php_path = $php_path;
        $this->php_url = $php_url;
    }

    
public function upJson(){
        $php_path = $this->php_path;
        $php_url = $this->php_url;

//根目錄路徑，能夠指定絕對路徑，好比 /var/www/attached/
        $save_path = $php_path . '/../attached/';
//根目錄URL，能夠指定絕對路徑，好比 http://www.yoursite.com/attached/
        $save_url = $php_url . '/attached/';

這裏只貼出了頭部的改造，別處的修改就是把別的函數定義成public function ，調用的地方相應的functionName()改爲$this->functionName() ，注意不要漏掉哦。

能夠看到上面的類中，都添加了構造函數，這是爲了把文件目錄傳遞給這個類。 

這裏只是把demo中的文件改造好了，而後就是調用了。

在components中新建一個文件Editor.php，代碼以下

require_once 'editor/JSON.php';
require_once 'editor/file_manager_json.php';
require_once 'editor/upload_json.php';

class Editor {
    
    public static function fileManageJson() {
        $php_path = Yii::app()->basePath;
        $php_url = Yii::app()->baseUrl;
        $fileManager = new fileManagerjson($php_path, $php_url);
        $fileManager->fileManager();
    }

    public static function uploadJson() {
        $php_path = Yii::app()->basePath;
        $php_url = Yii::app()->baseUrl;
        $fileManager = new uploadJson($php_path, $php_url);
        $fileManager->upJson();
    }

}

到這裏，知道後面該怎麼作了吧，那就是在action裏面調用這兩個方法就能夠了。

在controllers裏面新建文件EditoruploadController.php，對應action的代碼以下：

public function actionFileManageJson() {
        Editor::fileManageJson();
    }

    public function actionUploadJson() {
        Editor::uploadJson();
    }

 

好了，如今能夠測試一下上傳文件的功能了，發現會報錯。根據錯誤信息找到是JSON.php裏面的class_exists('pear')這個方法報錯，奇怪了，我沒有用pear啊，既然沒有用這個，因此試一下把這個註釋掉，再回到頁面中添加文章，發現上傳文件沒有問題， ，沒仔細看裏面的代碼，因此註釋這裏的代碼應該不是最好的解決方法，等有空再研究一下。

貼圖：