今天做了一個小功能，而且這個功能是已經(jīng)熟悉得不能在熟悉的功能了，很多時候開發(fā)者都是直接用模板來套，但是今天前后分離的文章添加功能得重新改改。以前也有寫過，可是已經(jīng)找不到封裝好的代碼在哪里了，所以今天就把使用流程列出來。
百度富文本
添加文章功能，關(guān)于標(biāo)題，日期等這些就不多說了，重點是在文章的內(nèi)容以及圖片處理。這里以百度富文本ueditor插件為例，后端語言：php。新手在使用前應(yīng)該帶著幾個疑問，比如：文章到數(shù)據(jù)庫以什么數(shù)據(jù)類型字段存儲？圖片怎么對應(yīng)到文章的段落？帶著問題到文檔中尋找答案，這是進(jìn)步最快的方式。
百度富文本
首先得從百度官方去下載ueditor插件庫，PHP最新版的，下載完之后解壓，會看到有php的配置文件夾，文件夾名稱就是php。在這個文件夾中，有配置文件config.json、上傳類文件等等，這些都是可以自定義配置的，個人認(rèn)為，能用百度官方提供的API解決的事情就不要去修改源碼。
解壓后的文件目錄
打開config.json文件，里面有富文本上傳功能的配置項，有上傳圖片配置，涂鴉配置，截圖工具上傳配置，遠(yuǎn)程圖片抓取配置，視頻上傳配置，文件上傳配置等都是在這個文件中配置的。默認(rèn)情況下官方上傳圖片的路徑是：/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}。這個路徑是相對根目錄而言的，也就是說，如果你的根目錄是http://www.xxx.com /website/，那么你的圖片地址就是：http://www.xxx.com/website/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}。一般來說都會自定義設(shè)置好這個目錄，可以根據(jù)自己的需求而定。
圖片上傳配置
這時候就有一個問題，當(dāng)圖文并茂的時候圖片的位置是沒有規(guī)律的，而前端工作人員傳過來的html實體中的圖片地址就是config.json中配置的地址，那這時候PHP接收到這一大段的字符串就要處理了，把嵌入在HTML實體中的圖片加上根目錄，這樣的話文章在渲染的時候圖片才能顯示出來。關(guān)于PHP處理文章圖片的思路，詳細(xì)分析一下主要有幾個方面。第一步就是要從這一大段字符串中找到圖片地址，然后把圖片地址存放在一個臨時數(shù)組里，遍歷這個數(shù)組并且替換上帶有根目錄的地址，最后把整個字符串替換，DEMO代碼如下。
DEMO
此時，可以直接入庫了。開發(fā)中小伙伴遇到又一個問題就是，當(dāng)編輯這篇文章的時候，發(fā)現(xiàn)有些圖片用不了了。仔細(xì)想想發(fā)現(xiàn)，原來是每次提交的時候都給圖片地址加上了根目錄，而且編輯的時候是已經(jīng)帶有根目錄的，所以也加上了，自然就訪問不到圖片了，此時只需要進(jìn)行判斷，用php的一個函數(shù)strpos定位一下接收的字符串中的圖片地址是否帶有根目錄，有的話就不處理，沒有的話就執(zhí)行。
