yii中嵌入kindeditor

万分感谢大爱的原作者, 原文点这里


1.下载kindeditor(官网下载地址:http://kindeditor.net/down.php),并解压到Yii框架的protected/extensions目录下,比如我的路径是protected/extensions/kindeditor。
2. 在kindeditor目录创建一个php类文件KEditorWidget.php,内容如下:

<?php

/**
 * Kindeditor编辑器输入组件
 * 作者:http://www.icultivator.com
 * 简单使用方法:
 * <?php $this->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;
    }
}

?>
  1. 接下来就是使用该组件在_form.php文件中显示出kindeditor的编辑器界面了,这也比较简单:
    1)简单调用:
<div class="row">
    <?php echo $form->labelEx($model,'content'); ?>
    <?php echo $form->textArea ($model,'content',array('rows'=>6, 'cols'=>50)); ?>
    <?php echo $form->error($model,'content'); ?>
</div>
<?php $this->widget ('ext.kindeditor.KEditorWidget',array('id'=>'textarea_id'))?>

注意最后一句,<?php $this->widget('ext.kindeditor.KEditorWidget', array('id'=>'textarea_id'))?>,其中的textarea_id是上面textarea文本框的id,如果不知道的话(在yii中不是然显示的),你可以打开所在的页面,然后按F12(通常是这个键),打开浏览器的调试模式,在代码那一块查看该textarea的id,如下图:
查看textarea的id
2)高级调用(设置编辑器参数),有时候我们想要更多的自定义一些选项,比如高度,宽度,以及想要显示的工具栏选项:

<div class="row">
    <?php echo $form->labelEx($model,'content'); ?>
    <?php echo $form->textArea($model,'content',        array('rows'=>6, 'cols'=>50)); ?>
    <?php echo $form->error($model,'content'); ?>
</div>
<?php $this->widget('ext.kindeditor.KEditorWidget', array('id'=>'Post_content','paramOptions'=>'{
    width:"700px",
    height:"300px",
}'))?>

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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值