资讯专栏INFORMATION COLUMN

yii2-Ueditor百度编辑器

fuchenxuan / 1588人阅读

摘要:今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考。

今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考。

资源下载

yii2.0-ueditor下载路径:

https://link.jianshu.com?t=https://github.com/org-yii-china/yii2-ueditor/archive/master.zip
效果演示:

安装方法:

1.下载yii2-ueditor
2.将下载的yii2-ueditor-master 修改 ueditor (注意:修改成其他文件名请修改插件内对应的命名空间)
3.将文件方在 根目录/common/widgets 下即可

调用方法:

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

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

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

["initialFrameWidth" => 850,]])?>

options 填写配置编辑器的参数(参考ueditor官网)

第二种调用方式:


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

field($model, "content")->widget("commonwidgetsueditorUeditor",[
    "options"=>[
        "initialFrameWidth" => 850,
    ]
]) ?>

  ...

yii2框架整合了百度编辑器,因为文件上传采用的是yii2自带的UploadedFile,这就难免umeditor上传不成功问题,解决问题的只需要两个操作步骤,我们来看看具体实现

创建一个 common/models/Upload.php: 代码为:

需要在刚刚创建的那个控制器Demo里添加actionUploadImage方法处理“富文本框的图片上传”内容
use yiiwebUploadedFile;
use commonmodelsUpload;
/**
     * 富文本框的图片上传
     * @return array
     */
    public function actionUploadImage()
    {
        $model = new Upload();
        if (Yii::$app->request->isPost) {
            $model->file = UploadedFile::getInstance($model, "file");
            $dir = "/uploads/ueditor/";//文件保存目录
            if (!is_dir($dir))
                mkdir($dir);
            if ($model->validate()) {
                $fileName = $model->file->baseName . "." . $model->file->extension;
                $dir = $dir."/". $fileName;
                $model->file->saveAs($dir);
                $info = [
                    "originalName" => $model->file->baseName,
                    "name" => $model->file->baseName,
                    "url" => $dir,
                    "size" => $model->file->size,
                    "type" => $model->file->type,
                    "state" => "SUCCESS",
                ];
                exit(json_encode($info));
            }
        }
    }

特别提醒:上述返回的$info信息中state状态只能是SUCCESS,区分大小写

视图文件


 field($model, "content")->widget("commonwidgetsueditorUeditor",[
        "options"=>[
            "initialFrameWidth" => 1050,//宽度
            "initialFrameHeight" => 550,//高度
        ]
    ]) ?>
"btn btn-success"]) ?>

其中content是字段名称

关于图片上传的可以看下:

https://www.yiichina.com/tutorial/862

在YII2框架中使用UEditor编辑器发布文章的地址:

https://www.cnblogs.com/felixji/p/6698436.html

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/29601.html

相关文章

  • 为Flask编写1个百度辑器的插件

    原文地址: http://52sox.com/write-a-flask-plugin-for-ueditor/ 近期项目开发中,隔壁那个搞python的哥们竟然笑着对我说,希望我能给他写1个百度编辑器的demo,方便他直接调用。 当时真的受宠若惊,这哥们实力不在我之下,只能答应它了。上网搜索下,有1篇文章Flask项目集成富文本编辑器UEditor实现图片上传功能已经有1个现成的例子了。 这...

    xbynet 评论0 收藏0
  • 为Flask编写1个百度辑器的插件

    原文地址: http://52sox.com/write-a-flask-plugin-for-ueditor/ 近期项目开发中,隔壁那个搞python的哥们竟然笑着对我说,希望我能给他写1个百度编辑器的demo,方便他直接调用。 当时真的受宠若惊,这哥们实力不在我之下,只能答应它了。上网搜索下,有1篇文章Flask项目集成富文本编辑器UEditor实现图片上传功能已经有1个现成的例子了。 这...

    wqj97 评论0 收藏0
  • yii1 集成百度辑器editor

    摘要:搜索,在上面增加一行修改后如下图,点击保存编辑搜索没有权限,把图上这两行注释掉没有权限如果不注释的话,如果用户没有登录,会提示没有权限。当然,如果你的需求,都是登陆后进行的操作的话。可以上传图片支持一个页面多个编辑器完毕参照文档 1:下载yii框架的ueditor 插件,yii 版本 1.1 ,ueditor 对应版本 1.4.3 下载地址:https://github.com/moj...

    荆兆峰 评论0 收藏0
  • 几款在线脑图制作工具

    摘要:介绍是一个在线协作绘图平台为用户提供最强大易用的作图工具支持在线创作流程图思维导图图界面原型设计界面原型设计等。 今天看到产品总监在画图,我顺便问了一句,你这个产品逻辑图画的很好看,确实好看,逻辑清清楚楚,一眼就能看清楚,这脑图除了可以用在产品上,也可以用在工作上,生活上,以便于拎清楚繁重的工作任务,也可以把生活过的井井有条,于是在傍晚下班时分,注册了几个在线的脑图工具与,是在线就可以...

    hufeng 评论0 收藏0
  • 百度地图开发实例番外篇--实用方法(持续更新)

    摘要:一前言在使用百度地图开发的过程中,查阅百度地图官网基本上就能满足开发的需求,但是有时候需要设置一些东西,很难在官网上查阅到相关的方法技巧。希望百度地图能够越来越强大,这样开发者就可以愉快的开发了 一 前言 在使用百度地图开发的过程中,查阅百度地图官网demo基本上就能满足开发的需求,但是有时候需要设置一些东西,很难在官网上查阅到相关的方法技巧。笔者特意把开发过程中遇到的一些疑难杂症和解...

    CocoaChina 评论0 收藏0

发表评论

0条评论

fuchenxuan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<