相信不止我，很多開發者在之前的很多項目中需要用到富文本工具(特別是一些需要發文章之類的網站)，然后各種封裝進來，然后出現各種問題；什么和前端框架不兼容啊，有些東西引入不進來啊。。等等等。。。（筆者在以往的項目中自己引入過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/里面可以根據自己的喜好或者項目的需求，減少功能按鈕.
希望這篇文章可以幫到正在奮戰的你們。
本文為作者原創，允許轉載，轉載后請以鏈接形式說明文章出處. 如轉載但不標明來源，后果自負。