yii2整合umeditor编辑器

目的:网页端可以使用类似于Word编写文本
工具:umeditor压缩包(可能缺少umeditor.min.js自己下载)
关键:针对text类型的字段category-content(数据表-字段)
content字段是text类型
在引入文件时,可以通过浏览器控制台查看文件是否引入
过程:
1、压缩包解压到/backend/web/css下,之后在backend/asset/AppAsset文件中添加函数

 public static function addScript($view,$jsfile){
        $view->registerJsFile($jsfile,[AppAsset::className(),'depends'=>'backend\assets\AppAsset']);

    }
    public static function addCss($view,$cssfile){
        $view->registerCssFile($cssfile,[AppAsset::className(),'depends'=>'backend\assets\AppAsset']);
    }

2、在_form.php中引入

use backend\assets\AppAsset;

AppAsset::register($this);

AppAsset::addCss($this,"/yii Frame/advanced/backend/web/css/umeditor/themes/default/_css/umeditor.css");
AppAsset::addScript($this,"/yii Frame/advanced/backend/web/css/umeditor/third-party/template.min.js");
AppAsset::addScript($this,"/yii Frame/advanced/backend/web/css/umeditor/umeditor.config.js");
AppAsset::addScript($this,"/yii Frame/advanced/backend/web/css/umeditor/umeditor.min.js");
AppAsset::addScript($this,"/yii Frame/advanced/backend/web/css/umeditor/lang/zh-cn/zh-cn.js");

或者通过静态添加的方式

        'css/umeditor/themes/default/_css/umeditor.css',
        'css/umeditor/third-party/jquery.min.js',
        'css/umeditor/third-party/template.min.js',
        'css/umeditor/umeditor.config.js',
        'css/umeditor/lang/zh-cn/zh-cn.js',

3、在底部注册

<?php $this->beginBlock("js-block") ?>
    $(function () {
        var um = UM.getEditor("category-content", {
        });
    });
<?php $this->endBlock() ?>
<?php $this->registerJs($this->blocks["js-block"], \yii\web\View::POS_END); ?>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值