本文作者:心月

YII2高级版框架搭建完整博客系统教程——添加富文本编辑器

心月IT博客 2019-03-13
YII2高级版框架搭建完整博客系统教程——添加富文本编辑器摘要:1、下载富文本编辑器组件 富文本编辑器组件下载 2、解压组件压缩包,并重命名为ueditor,然后将ueditor组件放入common widgets

1、下载富文本编辑器组件

富文本编辑器组件下载

2、解压组件压缩包,并重命名为ueditor,然后将ueditor组件放入commonwidgets

富文本编辑器组件存放位置

3、控制器中引用组件

/**
 * 富文本编辑组件
 */
'ueditor'=>[
    'class' => 'common\widgets\ueditor\UeditorAction',
    'config'=>[
        //上传图片配置
        'imageUrlPrefix' => "", /* 图片访问路径前缀 */
        'imagePathFormat' => "/image/{yyyy}{mm}/{dd}{time}{rand:6}",
    ]
],

控制器中引用富文本编辑器组件

4、富文本编辑器的使用(使用页面:frontend/views/posts/create.phpp)

<?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
    'options'=>[
        'initialFrameHeight' => 400,
    ]
]) ?>

创建文章渲染页面使用富文本组件

富文本使用效果图:

富文本组件使用效果图

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-03-13
若转载请注明原文及出处:https://www.xinyueseo.com/yii/180.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论