3-8 Yii2框架博客系统文章创建-富文本编辑器

最新推荐文章于 2025-05-28 09:00:01 发布

原创最新推荐文章于 2025-05-28 09:00:01 发布 · 840 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

Php 专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍如何在Yii2框架中集成百度Ueditor富文本编辑器，并提供了具体步骤与示例代码，帮助开发者快速实现富文本编辑功能。

步骤

1. Ueditor 组件加载及内容实现

和上传组件相似组件的下载地址 http://www.yii-china.com/post/detail/3.html

资源下载：

扩展下载（yii2.0-ueditor）

框架下载（Yii 2.0.6 高级版）

描述：

最佳适用于yii2.0 高级版（advanced）应用框架，对于基础板（basic）及其他框架要修改对应的命名空间即可使用

效果演示：

版本相关：

Yii：2.0.6

Ueditor：1.4.3.1 （php版本）

安装方法：

1.下载yii2-ueditor

2.将下载的yii2-ueditor-master 修改 ueditor (注意：修改成其他文件名请修改插件内对应的命名空间)

3.将文件方在根目录/common/widgets 下即可

调用方法：

在rootPath/backend/controllers中新建一个控制器加入以下代码

public function actions(){
    return [
        'ueditor'=>[
            'class' => 'common\widgets\ueditor\UeditorAction',
            'config'=>[
                //上传图片配置
                'imageUrlPrefix' => "", /* 图片访问路径前缀 */
                'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
            ]
        ]
    ];
}

第一种调用方式：

在对应的渲染页面，即views下的页面中

<?=common\widgets\ueditor\Ueditor::widget(['options'=>['initialFrameWidth' => 850,]])?>

options 填写配置编辑器的参数（参考ueditor官网）

第二种调用方式：

<?php $form = ActiveForm::begin(); ?>

<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>

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

  ...

<?php ActiveForm::end(); ?>

补充：

因为百度编辑器的工具操作过于多，所以为了简化将需要的加入进去只需要在view中加入需要的即可

代码示范

<?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
'options'=>[
'initialFrameHeight' => 400,
// 'toolbars'=>['具体的部件可以百度添加'], #将需要的小工具加入，为空表示没有添加任何的工具
]
]) ?>
<?php ActiveForm::end(); ?>

完成！