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啊，既然没有用这个，所以试一下把这个注释掉，再回到页面中添加文章，发现上传文件没有问题，，没仔细看里面的代码，所以注释这里的代码应该不是最好的解决方法，等有空再研究一下。

贴图：

来源：oschina

链接：https://my.oschina.net/u/582819/blog/200960

标签

kindeditor

Yii

富文本编辑

component

上传文件