小編給大家分享一下Laravel框架集成UEditor編輯器的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括雅安網(wǎng)站建設(shè)、
雅安網(wǎng)站制作、雅安網(wǎng)頁(yè)制作以及雅安網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，
雅安網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到雅安省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
具體如下：
一、 背景
ps :其實(shí)編輯器只是一個(gè)工具，舉一反三可以用在各種代碼語(yǔ)言或框架中
二、 探討
①. 第一種是使用composer 進(jìn)行安裝，可推薦參考文章 Laravel-u-editor，個(gè)人試過(guò)，無(wú)法上傳圖片 …
②. 第二種是到UEditor 官方下載源包自行配置（下文主要為此操作）
三、操作步驟
?. 下載對(duì)應(yīng)的源碼包
?. 放置在Public 目錄下
?. 前端文件配置
①. 首先在當(dāng)前頁(yè)面，需要引入 js 文件，注意類比src的正確引用.
var ue = UE.getEditor('ue-container');
ue.ready(function(){
ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
});
②. 在需要顯示富文本編輯器的位置，補(bǔ)充如下代碼
@php
echo htmlspecialchars_decode($article['content']);
@endphp
③. 實(shí)現(xiàn)效果如下：
?. 補(bǔ)充
①. 在進(jìn)行form 表單提交時(shí)，將獲得name="content" 所傳輸?shù)臄?shù)據(jù)寫入數(shù)據(jù)庫(kù)即可，而對(duì)應(yīng)在數(shù)據(jù)庫(kù)中存儲(chǔ)的數(shù)據(jù)如下所示：
復(fù)制代碼 代碼如下:
開場(chǎng)后，第32秒，佩頓在朗多投籃時(shí)犯規(guī)，送給鵜鶘2次罰球機(jī)會(huì)。第1分35秒，考辛斯妙傳，朱-霍勒迪三分遠(yuǎn)投命中。
第7分28秒，佩頓手滑丟球，被考辛斯搶斷。鵜鶘對(duì)籃板發(fā)起瘋狂進(jìn)攻，本節(jié)共搶下16個(gè)籃板，包括6個(gè)前場(chǎng)籃板，其中戴維斯一人就貢獻(xiàn)4個(gè)籃板球。
②. 當(dāng)取得了上述數(shù)據(jù)，若要在前端進(jìn)行顯示，需要執(zhí)行類似的轉(zhuǎn)化代碼：
echo htmlspecialchars_decode($article['content']);
③. 在富文本編輯器中，圖片的大小可自行調(diào)整.
四、擴(kuò)展學(xué)習(xí)
?. 圖片上傳路徑
其實(shí)，如果只是個(gè)簡(jiǎn)單的小網(wǎng)站或者學(xué)生的課設(shè)項(xiàng)目，無(wú)需修改，上傳的圖片會(huì)默認(rèn)放置在Public/ueditor/php/upload/image/ 目錄下
如果需要修改，可進(jìn)入php/config.json 文件，找到配置項(xiàng)"imagePathFormat" 進(jìn)行符合需求的修改,建議可以讓文件名較長(zhǎng)一些以避免重名:
[注]:
個(gè)人初始測(cè)試發(fā)現(xiàn)，文件命名時(shí)的“{rand:6}”定義無(wú)法實(shí)現(xiàn),網(wǎng)上卻沒有類似的解決方法，解決方案請(qǐng)參考后面的 ***【附錄】***.
?. 圖片訪問(wèn)前綴
五、附錄
?. 圖片文件名{rand:$num} 解決
剛開始想到使用時(shí)間戳加文件原名稱來(lái)作為名字，但是當(dāng)有中文字符時(shí)無(wú)法上傳。
其實(shí)原本的ThinkPHP框架中也集成過(guò)UEditor，但是沒有這種問(wèn)題，通過(guò)閱讀源碼，找到正則表達(dá)式的匹配位置Public/ueditor-mz/php/Uploader.class.php
//TODO 替換隨機(jī)字符串 數(shù)值太大可能導(dǎo)致部分環(huán)境報(bào)錯(cuò)
$randNum = rand(100000, 10000000) . rand(100000, 10000000);
//也可用使用md5()或兩者的組合
$randNum = base64_encode($randNum);
以上是“Laravel框架集成UEditor編輯器的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站欄目：Laravel框架集成UEditor編輯器的示例分析-創(chuàng)新互聯(lián)
文章起源：
http://weahome.cn/article/dcipej.html
重慶分公司
重慶分公司
