Laravel框架集成UEditor編輯器的方法圖文與實(shí)例詳解

本文實(shí)例講述了Laravel框架集成UEditor編輯器的方法。分享給大家供大家參考，具體如下：

一、 背景

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

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

二、 探討

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

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

②. 第二種是到 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 表單提交時(shí)，將獲得 name="content" 所傳輸?shù)臄?shù)據(jù)寫入數(shù)據(jù)庫即可，而對應(yīng)在數(shù)據(jù)庫中存儲的數(shù)據(jù)如下所示：

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

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

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

♩. 圖片上傳路徑

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

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

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

♪. 圖片訪問前綴

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

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

五、附錄

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

1. 剛開始想到使用時(shí)間戳加文件原名稱來作為名字，但是當(dāng)有中文字符時(shí)無法上傳。
2. 其實(shí)原本的ThinkPHP框架中也集成過UEditor，但是沒有這種問題，通過閱讀源碼，找到正則表達(dá)式的匹配位置 Public/ueditor-mz/php/Uploader.class.php

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

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

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

♫. 呵呵

• 真是尷尬了，方案一測試多遍依然不成功，所以鐘情于第二種方案 …
• HELP ！HELP！HELP！

【補(bǔ)充問題】（2018-02-06）：

emm樓主第一種上傳不了圖片的問題我當(dāng)時(shí)也遇到過，最后發(fā)現(xiàn)是接口路徑?jīng)]配置好。在laravl-u-editor 目錄下 ueditor.config.js文件 中修改33行左右的 serverUrl，改成對應(yīng)的路徑即可。

這個(gè)問題，可以參考 相應(yīng)文章的提示，下次有機(jī)會可以嘗試一番…

更多關(guān)于Laravel相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《Laravel框架入門與進(jìn)階教程》、《php優(yōu)秀開發(fā)框架總結(jié)》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》

希望本文所述對大家基于Laravel框架的PHP程序設(shè)計(jì)有所幫助。