Laravel 富文本插件-Ueditor

相信不止我，不少開發者在以前的不少項目中須要用到富文本工具(特別是一些須要發文章之類的網站)，而後各類封裝進來，而後出現各類問題；什麼和前端框架不兼容啊，有些東西引入不進來啊。。等等等。。。（筆者在以往的項目中本身引入過2種富文本工具，雖然都很成功，但無疑會浪費不少時間 以前用過的有百度的富文本和一個叫作kindeditor的富文本）

爲何給你們推薦這個小插件呢，由於在有些項目裏面 他還真是必不可少的，爲了減小開發速度，用這個插件基本上幾分鐘就能完美引入這個插件了，並且他還能夠支撐雲存儲上傳（6666..）

插件介紹: UEditor是由百度web前端研發部開發所見即所得富文本web編輯器 本項目，是爲了支持laravel5，使用的UEditor是php版本的1.4.3 支持本地和七牛雲存儲(在配置文件中配置),默認爲本地上傳 public/uploads

示例：

1、 安裝組件

composer require menthe/aliyun-ueditor -vvv

安裝完成後，打開config/app.php配置服務提供者,即provider

Harris\UEditor\UEditorServiceProvider::class,

運行

php artisan vendor:publish

2、配置文件

若以上安裝沒問題,自定義項目配置文件會生成一個 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 這個配置項，必須正確配置，不然上傳的圖片路徑沒法正確顯示，固然若是使用七牛，這個可留空不作設置.

3、 使用組件

執行完之後步驟後，會在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/裏面能夠根據本身的喜愛或者項目的需求，減小功能按鈕.

但願這篇文章能夠幫到正在奮戰的大家。

本文爲做者原創，容許轉載，轉載後請以連接形式說明文章出處. 如轉載但不標明來源，後果自負。