Yii框架扩展：KEditor——完美整合Yii框架和KindEditor的可视化编辑器

最近业余时间在用Yii框架做一个内容采集及分发平台，这里面自然涉及到文章内容采集和发布，一般采集软件从采集到发布一站式解决，但是既然做了自己用，有时候还是要保证文章质量的，所以在采集和发布之间，我想做一个中间层，对文章内容进行优化和处理，那么这里就要用到可视化编辑器对文章内容进行编辑，国外比较流行的可视化编辑器主要有CKEditor和TinyMCE（wordpress即是采用这款编辑器），但是它们有个缺点就是图片上传处理及浏览是要收费的，所以转向国内，国内的话主要就是KindEditor和百度编辑器UEditor，之前用过百度编辑器（参阅百度编辑器整合Yii框架），这次准备玩玩KindEditor，按照文档（参阅kindeditor编辑器使用方法）去整合进来固然可以，但是扩展性不好，不如直接自己基于KindEditor写个扩展。

在Yii框架中，写个这种扩展比较简单，下面就扩展的编写和使用方法做个简单说明：

1.下载kindeditor（下载地址：http://pan.baidu.com/s/1pJsIth5），并解压到Yii框架的protected/extensions目录下，比如我的路径是protected/extensions/kindeditor。

2.在kindeditor目录创建一个php类文件KEditorWidget.php，内容如下：

widget('ext.kindeditor.KEditorWidget',array(
 *     'id'=>'Item_content',	# Textarea id
 * )); ?>
 */

class KEditorWidget extends CInputWidget
{
    public $id;
    public $language = 'zh_CN';
    public $paramOptiOns= '{}';

    /**
     * 初始化组件.
     */
    public function init()
    {
         // 阻止从命令行执行.
         if (Yii::app() instanceof CConsoleApplication)
              return;

         /** @var CClientScript $cs */
         $cs = Yii::app()->getClientScript(); 
         $cs->registerScriptFile($this->assetsUrl.'/kindeditor-min.js', CClientScript::POS_HEAD);
    }

    /**
     * 运行组件.
     */
    public function run()
    {
        $script = "KindEditor.ready(function(K){window.editor=K.create('#".$this->id."',".$this->paramOptions.");});";
        /** @var CClientScript $cs */
        $cs = Yii::app()->getClientScript();
        $cs->registerScript($this->id, $script, CClientScript::POS_HEAD);
        $cs->registerScriptFile($this->assetsUrl.'/lang/'.$this->language.'.js', CClientScript::POS_HEAD);
    }

    public function getAssetsUrl()
    {
        $assetsPath = Yii::getPathOfAlias('ext.kindeditor');
        $assetsUrl = Yii::app()->assetManager->publish($assetsPath, false, -1, YII_DEBUG);
        return $assetsUrl;
    }
}

?>

3.接下来就是使用该组件在_form.php文件中显示出kindeditor的编辑器界面了，这也比较简单：

1）简单调用：

    labelEx($model,'content'); ?>
    textArea($model,'content',array('rows'=>6, 'cols'=>50)); ?>
    error($model,'content'); ?>

widget('ext.kindeditor.KEditorWidget',array('id'=>'Post_content'))?>

2）高级调用（设置编辑器参数）,有时候我们想要更多的自定义一些选项，比如高度，宽度，以及想要显示的工具栏选项：

    labelEx($model,'content'); ?>
    textArea($model,'content',array('rows'=>6, 'cols'=>50)); ?>
    error($model,'content'); ?>

widget('ext.kindeditor.KEditorWidget',array('id'=>'Post_content','paramOptions'=>'{
    width:"700px",
    height:"300px",
}'))?>

更多编辑器设可参考这篇文章：KindEditor使用入门（二）—— 编辑器初始化参数

下面是显示出的编辑器界面效果图：

最后给出KEditor扩展的下载地址：http://pan.baidu.com/s/1kTwUmGZ

有什么问题，欢迎大家在下面的评论中与我讨论。

注：我整合的KindEditor是4.1.10版本。