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

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

一、 背景

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

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

二、 探討

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

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

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

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

三、操作步驟

❶. 下載對(duì)應(yīng)的源碼包

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

❷. 放置在 Public 目錄下

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

❸. 前端文件配置

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

①. 首先在當(dāng)前頁(yè)面，需要引入 js 文件，注意類(lèi)比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)行的編寫(xiě)，該處為初始化內(nèi)容的位置-->

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

❹. 補(bǔ)充

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

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

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

四、擴(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)上卻沒(méi)有類(lèi)似的解決方法，解決方案請(qǐng)參考后面的 ***【附錄】***.

♪. 圖片訪問(wèn)前綴

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

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

五、附錄

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

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

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

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

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

♫. 呵呵

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

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

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

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

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

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