laravel富文本編輯器u-editor使用方法

無論是blog還是商城其中都會(huì)使用到富文本編輯器,之前我都是直接在官網(wǎng)上下載直接引入到項(xiàng)目中,從師兄那里了解到laravel中已經(jīng)可以嵌入u-editor的組件了,所以我按照師兄提供的攻略操作了一番,發(fā)現(xiàn)了一些問題,當(dāng)然我沒聽話使用師兄提供的那個(gè)組件,我使用的是

stevenyangecho/laravel-u-editor這個(gè)。開發(fā)環(huán)境是ubuntu14.04+negix+php7.1+laravel5.3

安裝這個(gè)組件的方法如下:(當(dāng)然需要你有composer)

直接命令行:或者在composer.json中的require中插入"stevenyangecho/laravel-u-editor": "^1.4"

執(zhí)行composer install或者composer update。組件成功遷入后執(zhí)行如下配置。

打開框架下的config/app.php配置服務(wù)提供者

在providers下插入:Riverslei\UEditor\UEditorServiceProvider::class,

保存退出后在控制臺(tái)執(zhí)行運(yùn)行

php artisan vendor:publish

這一切成功后你的項(xiàng)目目錄下的config目錄下會(huì)生成一個(gè)UEditorUpload.php文件,public目錄下會(huì)生成一個(gè)目錄laravel-u-editor。

UEditorUpload.php文件是組件文件上傳的一個(gè)配置文件。里面必須配置的有如下內(nèi)容:

// 'middleware' => 'auth',

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

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

'qiniu'=>[

'accessKey'=>'accessKey',

'secretKey'=>'secretKey',

'bucket'=>'bucket',

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

]

文件內(nèi)這些配置項(xiàng)都有相應(yīng)的注釋,我不做過多的解釋,我使用的是七牛云存儲(chǔ)只需要在mode這個(gè)鍵下填寫‘qiniu’,然后把你七牛云存儲(chǔ)上面的accessKey,secretKey,bucket,url全部配置上即可。

到這里都算正常,基本是按照師兄的思路來進(jìn)行的。而且我也創(chuàng)建了一個(gè)控制器并在路由中指定控制器Route::get('/', 'TextController@index');

控制器中輸出一個(gè)視圖

視圖中只需@include('UEditor::head')忘了說這個(gè)在框架的resources下也是剛才我們注冊服務(wù)時(shí)自動(dòng)生成的。我們的模板只需引入其即可接著我們插入表單即可。

另外插入這段JS可以調(diào)整文本框大小樣式。

var ue = UE.getEditor('container', {

initialFrameWidth : 900,

initialFrameHeight : 350,

});

ue.ready(function() {

//此處為支持laravel5 csrf ,根據(jù)實(shí)際情況修改,目的就是設(shè)置 _token 值.

ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');

});

截止目前為止該組件的大部分功能可以使用了,只有文件上傳功能有問題,通過控制臺(tái)來看,運(yùn)行該組件時(shí)它會(huì)向我們的后臺(tái)發(fā)送一次請求獲取服務(wù)器狀態(tài),因?yàn)檫@次請求并沒產(chǎn)生預(yù)期效果所以文件上傳功能暫時(shí)不可用。于是我們還需要修改一下

public/laravel-u-editor/ueditor.config.js這個(gè)文件

找到這項(xiàng)配置// 服務(wù)器統(tǒng)一請求接口路徑

, serverUrl: URL + "php/controller.php",修改其為, serverUrl: "/laravel-u-editor-server/server"

保存后刷新頁面一切正常,所有文件統(tǒng)一上傳至七牛云。

本教程大部分思路來自我?guī)熜謪纬奈⒉?/p>

http://www.blog8090.com/laravel-fu-wen-ben-cha-jian-ueditor/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容