1. 程式人生 > >Laravel-使用富文字編輯器UEditor

Laravel-使用富文字編輯器UEditor

安裝元件的方法如下:(當然需要你有composer)
  • 直接命令列:或者在composer.json中的require中插入"stevenyangecho/laravel-u-editor": "^1.4"
  • 執行composer install或者composer update。元件成功遷入後執行如下配置。
  • 開啟框架下的config/app.php配置服務提供者

  • 在providers下插入:Stevenyangecho\UEditor\UEditorServiceProvider::class,

  • 儲存退出後在控制檯執行執行

  • php artisan vendor:publish

  • 這一切成功後你的專案目錄下的config目錄下會生成一個UEditorUpload.php檔案,public目錄下會生成一個目錄laravel-u-editor。
如圖生成檔案;
UEditorUpload.php檔案是元件檔案上傳的一個配置檔案。裡面必須配置的有如下內容:
// 'middleware' => 'auth',

'mode'=>'qiniu',//上傳方式,local 為本地  qiniu 為七牛

//七牛配置,若mode='qiniu',以下為必填.

'qiniu'=>[

'accessKey'=>'accessKey',

'secretKey'=>'secretKey',

'bucket'=>'bucket',

'url'=>'url',//七牛分配的CDN域名,注意帶上http://

使用方法,如下程式碼: 這個是內容編輯頁面的檢視:
<div class="col-sm-10">
    @include('vendor.UEditor.head')
    <!-- 載入編輯器的容器 -->
    <script id="container" name="content" type="text/plain" style='width:100%;height:300px;'>
        {!! html_entity_decode($article->content) !!}
    </script>
    <!-- 例項化編輯器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
        ue.ready(function(){
            ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); 
        });
    </script>
</div>
這裡引入js指令碼:
@include('vendor.UEditor.head')
內容新增頁面去掉 :
{!! html_entity_decode($article->content) !!}
這裡定義編輯器介面高寬:
style='width:100%;height:300px;'
這裡例項化編輯器:
var ue = UE.getEditor('container');
這裡新增laravel安全token:
ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');