Laravel 富文本插件-Ueditor

一、 安装组件

"riverslei/laravel-ueditor": "*"

然后运行composer install或者composer update

安装完成后,打开config/app.php配置服务提供者

Riverslei\UEditor\UEditorServiceProvider::class,

运行

php artisan vendor:publish

二、配置文件

若以上安装没问题,自定义项目配置文件会生成一个 config/ueditor.php

<?php/* 前后端通信相关的配置,注释只允许使用多行方式 */return [/*
|--------------------------------------------------------------------------
| 新增配置,route
|--------------------------------------------------------------------------
|
|注意权限验证,请自行添加middleware 
|middleware 相当重要,请根据自己的项目设置,比如如果在后台使用,请设置为后台的auth middleware.
|如果是单纯本机测试,请将 
|`// 'middleware' => 'auth',` 直接注释掉,如果留 `'middleware'=>''`空值,会产生bug,原因不详.
|
|
*/
    'core' => [        'route' => [           // 'middleware' => 'auth',
        ],        'mode'=>'local',//上传方式,local 为本地   qiniu 为七牛

        'baseurl'=>'http://admin.test.com',// 设置网站的根路由(可访问到index.php的路由)

        //七牛配置,若mode='qiniu',以下为必填.
        'qiniu'=>[            'accessKey'=>' env('QINIU_ACCESSKEY');',            'secretKey'=>'env('QINIU_SECRETKEY')',            'bucket'=>'env('QINIU_BUCKET')',// 使用的七牛空间名称
            'url'=>'env('QINIU_DOMAIN')',//七牛分配的CDN域名,注意带上http://

        ]
    ],    /**
     * 和原 UEditor /php/config.json 配置完全相同
     *
     */
    /* 上传图片配置项 */
    'upload' => [        "imageActionName" => "uploadimage", /* 执行上传图片的action名称 */
        "imageFieldName" => "upfile", /* 提交的图片表单名称 */
        "imageMaxSize" => 2048000, /* 上传大小限制,单位B */
        "imageAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
        "imageCompressEnable" => true, /* 是否压缩图片,默认是true */
        "imageCompressBorder" => 1600, /* 图片压缩最长边限制 */
        "imageInsertAlign" => "none", /* 插入的图片浮动方式 */
        "imageUrlPrefix" => "", /* 图片访问路径前缀 */
        "imagePathFormat" => "/uploads/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
        /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
        /* {time} 会替换成时间戳 */
        /* {yyyy} 会替换成四位年份 */
        /* {yy} 会替换成两位年份 */
        /* {mm} 会替换成两位月份 */
        /* {dd} 会替换成两位日期 */
        /* {hh} 会替换成两位小时 */
        /* {ii} 会替换成两位分钟 */
        /* {ss} 会替换成两位秒 */
        /* 非法字符 \ : * ? " < > | */
        /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

        /* 涂鸦图片上传配置项 */
        "scrawlActionName" => "uploadscrawl", /* 执行上传涂鸦的action名称 */
        "scrawlFieldName" => "upfile", /* 提交的图片表单名称 */
        "scrawlPathFormat" => "/uploads/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        "scrawlMaxSize" => 2048000, /* 上传大小限制,单位B */
        "scrawlUrlPrefix" => "", /* 图片访问路径前缀 */
        "scrawlInsertAlign" => "none",        /* 截图工具上传 */
        "snapscreenActionName" => "uploadimage", /* 执行上传截图的action名称 */
        "snapscreenPathFormat" => "/uploads/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        "snapscreenUrlPrefix" => "", /* 图片访问路径前缀 */
        "snapscreenInsertAlign" => "none", /* 插入的图片浮动方式 */

        /* 抓取远程图片配置 */
        "catcherLocalDomain" => ["127.0.0.1", "localhost", "img.baidu.com"],        "catcherActionName" => "catchimage", /* 执行抓取远程图片的action名称 */
        "catcherFieldName" => "source", /* 提交的图片列表表单名称 */
        "catcherPathFormat" => "/uploads/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        "catcherUrlPrefix" => "", /* 图片访问路径前缀 */
        "catcherMaxSize" => 2048000, /* 上传大小限制,单位B */
        "catcherAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */

        /* 上传视频配置 */
        "videoActionName" => "uploadvideo", /* 执行上传视频的action名称 */
        "videoFieldName" => "upfile", /* 提交的视频表单名称 */
        "videoPathFormat" => "/uploads/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        "videoUrlPrefix" => "", /* 视频访问路径前缀 */
        "videoMaxSize" => 102400000, /* 上传大小限制,单位B,默认100MB */
        "videoAllowFiles" => [            ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",            ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */...
...

middleware 相当重要,请根据自己的项目设置,比如如果在后台使用,请设置为后台的auth middleware. 如果是单纯本机测试,请将 // 'middleware' => 'auth', 直接注释掉,如果留 'middleware'=>''空值,会产生bug,原因不详.

所有UEditor 的官方资源,会放在 public/laravel-ueditor/ ,可以根据自己的需求,更改.

这里需要重点说明的是 core.baseurl 这个配置项,必须正确配置,否则上传的图片路径无法正确显示,当然如果使用七牛,这个可留空不做设置.

三、 使用组件

执行完以后步骤后,会在resources/views/vendor/UEditor中看到test.blade.php文件, 现在需要做以下几步操作

生成一个控制器

php artisan make:controller PhotoController

路由中指定控制器

Route::get('/', 'PhotoController@index');

路由指定完成后,控制器中直接输出页面

    /**
     * 这是我的一个测试方法
     * @return \Illuminate\Http\Response
     */
    public function index()
    {        //
        return view('vendor.UEditor.test');
    }

这样在浏览器中就可以看到富文本输出在页面上了

另外:

页面里面的js也可以按照自己的需求来调整,csrf_token() 也已经全部写好了。

@include('UEditor::head')<form method="post">  
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <!-- 加载编辑器的容器 -->
    <textarea id="container" name="content">这里写你的初始化内容</textarea>
    <input type="submit" value="提交"></form><script type="text/javascript">  
    var ue = UE.getEditor('container', {
            initialFrameWidth : 1200,
            initialFrameHeight : 350,
    });
    ue.ready(function() {            //此处为支持laravel5 csrf ,根据实际情况修改,目的就是设置 _token 值. 
            ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');   
    });</script>  

文件/public/laravel-ueditor/ueditor.config.js/里面可以根据自己的喜好或者项目的需求,减少功能按钮.

Jason.wang

When you find your talent can't afford to be ambitious, be quiet and study !

You may also like...