Laravel 富文本插件-Ueditor

相信不止我，很多开发者在之前的很多项目中需要用到富文本工具(特别是一些需要发文章之类的网站)，然后各种封装进来，然后出现各种问题；什么和前端框架不兼容啊，有些东西引入不进来啊。。等等等。。。（笔者在以往的项目中自己引入过2种富文本工具，虽然都很成功，但无疑会浪费很多时间 之前用过的有百度的富文本和一个叫做kindeditor的富文本）

为什么给大家推荐这个小插件呢，因为在有些项目里面 他还真是必不可少的，为了减少开发速度，用这个插件基本上几分钟就能完美引入这个插件了，而且他还可以支撑云存储上传（6666..）

插件介绍: UEditor是由百度web前端研发部开发所见即所得富文本web编辑器 本项目，是为了支持laravel5，使用的UEditor是php版本的1.4.3 支持本地和七牛云存储(在配置文件中配置),默认为本地上传 public/uploads

示例：

一、 安装组件

composer require menthe/aliyun-ueditor -vvv

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

Harris\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="ueditor" name="content">这里写你的初始化内容</textarea>
    <input type="submit" value="提交">
</form>

<script type="text/javascript">  
    var ue = UE.getEditor('ueditor', {
            initialFrameWidth : 1200,
            initialFrameHeight : 350,
    });
    ue.ready(function() {
            //此处为支持laravel5 csrf ,根据实际情况修改,目的就是设置 _token 值. 
            ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');   
    });
</script>  

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

希望这篇文章可以帮到正在奋战的你们。

本文为作者原创，允许转载，转载后请以链接形式说明文章出处. 如转载但不标明来源，后果自负。

转载于:https://www.cnblogs.com/jhcyzxx/p/10479885.html