Laravel框架集成UEditor編輯器的示例分析

小編給大家分享一下Laravel框架集成UEditor編輯器的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體如下：

一、 背景

• 在項(xiàng)目開發(fā)的過程中，免不了使用修改功能，而富文本編輯器是極為方便的一種推薦，當(dāng)然，個人認(rèn)為 MarkDown 更為簡單，但是感覺暫時只適合程序猿

• 此文介紹如何在 Laravel5.5 框架中集成使用富文本編輯器 UEditor

ps : 其實(shí)編輯器只是一個工具，舉一反三可以用在各種代碼語言或框架中

二、 探討

• 通過網(wǎng)上求知，發(fā)現(xiàn)主要有兩種方法實(shí)現(xiàn)

①. 第一種是使用 composer 進(jìn)行安裝，可推薦參考文章 Laravel-u-editor，個人試過，無法上傳圖片 …

②. 第二種是到 UEditor 官方下載源包自行配置（下文主要為此操作）

• ps : [如果有哪位能夠成功實(shí)現(xiàn)第一種方案，請告訴鄙人一下，萬分感謝！]

三、操作步驟

?. 下載對應(yīng)的源碼包

• 可點(diǎn)擊進(jìn)入下載地址，本人下載的是最新 PHP(UTF-8) 版本

?. 放置在 Public 目錄下

• 將解壓后的文件夾，放置在 Public 目錄下，本人只是將文件夾名字改動了一下.

?. 前端文件配置

• 詳情可參考 官方文檔
   以本人為例：

①. 首先在當(dāng)前頁面，需要引入 js 文件，注意類比src的正確引用.

<!-- ueditor-mz 配置文件 -->
<script type="text/javascript" src="{{asset('ueditor-mz/ueditor.config.js')}}"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="{{asset('ueditor-mz/ueditor.all.js')}}"></script>
<!-- 實(shí)例化編輯器 -->
<script type="text/javascript">
 var ue = UE.getEditor('ue-container');
 ue.ready(function(){
  ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
 });
</script>

②. 在需要顯示富文本編輯器的位置，補(bǔ)充如下代碼

<!-- 加載編輯器的容器 -->
<script id="ue-container" name="content" type="text/plain">
@php
echo htmlspecialchars_decode($article['content']);
@endphp
</script>
<!-- 上述的 php 代碼是根據(jù)實(shí)際需求進(jìn)行的編寫，該處為初始化內(nèi)容的位置-->

③. 實(shí)現(xiàn)效果如下：

?. 補(bǔ)充

①. 在進(jìn)行 form 表單提交時，將獲得 name="content" 所傳輸?shù)臄?shù)據(jù)寫入數(shù)據(jù)庫即可，而對應(yīng)在數(shù)據(jù)庫中存儲的數(shù)據(jù)如下所示：

復(fù)制代碼 代碼如下:

<p><strong >&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span ></span></strong><span >開場后，第<strong>32秒</strong>，佩頓在朗多投籃時犯規(guī)，送給鵜鶘2次罰球機(jī)會。第1分35秒，考辛斯妙傳，朱-霍勒迪三分遠(yuǎn)投命中。</span></p><p><span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第7分28秒，佩頓手滑丟球，被考辛斯搶斷。鵜鶘對籃板發(fā)起瘋狂進(jìn)攻，本節(jié)共搶下16個籃板，包括6個前場籃板，其中戴維斯一人就貢獻(xiàn)4個籃板球。</span></p><p ><img src="http://lar5Pro.com/upload/image/20171227/NjUzNDczMDc3ODU2.jpg" title="NjUzNDczMDc3ODU2.jpg" alt="article_3.jpg" width="906" height="450"/><br/></p>

②. 當(dāng)取得了上述數(shù)據(jù)，若要在前端進(jìn)行顯示，需要執(zhí)行類似的轉(zhuǎn)化代碼：

echo htmlspecialchars_decode($article['content']);

③. 在富文本編輯器中，圖片的大小可自行調(diào)整.

四、擴(kuò)展學(xué)習(xí)

?. 圖片上傳路徑

• 其實(shí)，如果只是個簡單的小網(wǎng)站或者學(xué)生的課設(shè)項(xiàng)目，無需修改，上傳的圖片會默認(rèn)放置在 Public/ueditor/php/upload/image/ 目錄下

• 如果需要修改，可進(jìn)入php/config.json 文件，找到配置項(xiàng) "imagePathFormat" 進(jìn)行符合需求的修改,建議可以讓文件名較長一些以避免重名:

[注]:
個人初始測試發(fā)現(xiàn)，文件命名時的“{rand:6}”定義無法實(shí)現(xiàn),網(wǎng)上卻沒有類似的解決方法，解決方案請參考后面的 ***【附錄】***.

?. 圖片訪問前綴

• 如果使用了多個服務(wù)器，設(shè)置統(tǒng)一的圖片訪問前綴極有必要，可配置參數(shù)“imageUrlPrefix”，例如我的配置路徑可以為：“http://lar5Pro.com”

• 這樣一來，存入數(shù)據(jù)庫中的圖片路徑都會加上了此前綴.

五、附錄

?. 圖片文件名 {rand:$num} 解決

1. 剛開始想到使用時間戳加文件原名稱來作為名字，但是當(dāng)有中文字符時無法上傳。

2. 其實(shí)原本的ThinkPHP框架中也集成過UEditor，但是沒有這種問題，通過閱讀源碼，找到正則表達(dá)式的匹配位置 Public/ueditor-mz/php/Uploader.class.php

• 大概在 304 行左右，原因是rand() 取值太大可能導(dǎo)致部分環(huán)境報錯

• 個人覺得數(shù)字的命名不如字母好些，于是代碼替換為如下的樣子：

//TODO 替換隨機(jī)字符串 數(shù)值太大可能導(dǎo)致部分環(huán)境報錯
$randNum = rand(100000, 10000000) . rand(100000, 10000000);
//也可用使用md5()或兩者的組合
$randNum = base64_encode($randNum);

以上是“Laravel框架集成UEditor編輯器的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！