欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年04月17日 10:16:54   作者：moTzxx  
這篇文章主要介紹了Laravel框架集成UEditor編輯器的方法,結(jié)合圖文與實例形式詳細(xì)分析了Laravel框架整合集成UEditor編輯器的相關(guān)操作步驟與具體實現(xiàn)技巧,需要的朋友可以參考下

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

一、 背景

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

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

二、 探討

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

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

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

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

三、操作步驟

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

  • 可點擊進入下載地址，本人下載的是最新 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>
<!-- 實例化編輯器 -->
<script type="text/javascript">
 var ue = UE.getEditor('ue-container');
 ue.ready(function(){
  ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
 });
</script>

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

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

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

❹. 補充

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

復(fù)制代碼 代碼如下:
<p><strong style="white-space: normal; padding: 0px; margin: 0px;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span style="color: rgb(51, 51, 51);"></span></strong><span style="color: rgb(51, 51, 51);">開場后，第<strong>32秒</strong>，佩頓在朗多投籃時犯規(guī)，送給鵜鶘2次罰球機會。第1分35秒，考辛斯妙傳，朱-霍勒迪三分遠投命中。</span></p><p><span style="color: rgb(51, 51, 51);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第7分28秒，佩頓手滑丟球，被考辛斯搶斷。鵜鶘對籃板發(fā)起瘋狂進攻，本節(jié)共搶下16個籃板，包括6個前場籃板，其中戴維斯一人就貢獻4個籃板球。</span></p><p style="text-align: center;"><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ù)，若要在前端進行顯示，需要執(zhí)行類似的轉(zhuǎn)化代碼：

echo htmlspecialchars_decode($article['content']);
③. 在富文本編輯器中，圖片的大小可自行調(diào)整.

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

♩. 圖片上傳路徑

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

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

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

♪. 圖片訪問前綴

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

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

五、附錄

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

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

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

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

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

♫. 呵呵

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

【補充問題】（2018-02-06）：

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

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

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

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

相關(guān)文章

最新評論