小編最近做了一個(gè)項(xiàng)目，在用戶發(fā)表文章的模塊上，考慮到用戶編寫文章時(shí)的排版需求。要借助富文本編輯器。搜索發(fā)現(xiàn)，現(xiàn)在有很多免費(fèi)的編輯器插件。例如：百度的Ueditor、Summernote 。但是這幾個(gè)插件的入手難度比較高，而且文檔說(shuō)明不詳細(xì)。

最后發(fā)現(xiàn)一個(gè)國(guó)內(nèi)的編輯器wangEditor，配置起來(lái)非常簡(jiǎn)單，漂亮的UI，而且開發(fā)者很用心的寫了詳細(xì)的文檔說(shuō)明。在這里也算是一個(gè)推薦吧，對(duì)于我這種剛剛接觸 富文本編輯器的小白來(lái)說(shuō)，能夠馬上使用，馬上看到效果。何嘗不是天下一大幸事。

1.png

對(duì)于編輯器的基本配置，大家可以參考文檔說(shuō)明，我在此就不一一贅述。

而在“ 圖片上傳 ” 環(huán)節(jié)，困擾我許久。由于我使用的是php作為服務(wù)器端的接收語(yǔ)言。恰巧開發(fā)文檔中對(duì)于php這一塊沒有做過(guò)多說(shuō)明。我反復(fù)調(diào)試，依然不能很好的接收到圖片。沒辦法只能百度，也順利的在一篇文章中找到了問題所在，非常感謝這位博主的分享：http://www.2cto.com/kf/201605/507003.html

接收 圖片上傳 的配置流程：

1.第一處配置：

editor.config.uploadImgUrl = 'upload.php';

注意：這里的upload.php，是指在服務(wù)器上，用于接收?qǐng)D片的文件。

(重點(diǎn)，千萬(wàn)別當(dāng)成服務(wù)器接收?qǐng)D片的文件夾。)

2.第二處配置：

editor.config.uploadImgFileName = 'myFileName';

// 統(tǒng)一指定文件名，類似于標(biāo)簽的name屬性，文檔中有說(shuō)明。

3.簡(jiǎn)單的 upload.php 腳本：

$imgInfo = $_FILES['myFileName'];

// 圖片名稱

$oldname = $imgInfo['name'];

// 臨時(shí)文件

$tmp_name = $imgInfo['tmp_name'];

// 錯(cuò)誤信息

$error = $imgInfo['error'];

// 分割字符串，得到數(shù)組。

$temp = explode(".",$oldname);

// 用時(shí)間戳 + 文件后綴 重命名文件。

$newname = time().".".$temp[count($temp)-1];

// 在服務(wù)上移動(dòng)圖片到指定目錄。

move_uploaded_file($tmp_name,'backend/uploads/'.$newname);

// 返回圖片路徑，類似ajax的響應(yīng)流程。

echo $dir = "backend/uploads/".$newname;

ps：到這里就完成配置，可以上傳圖片了。在編輯器中進(jìn)行圖文并茂的排版了。( 不推薦，直接復(fù)制粘貼。)

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的php中html富文本编辑器,php + wangEditor 富文本编辑器的配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。