thinkphp富文本編輯器如何實現上傳圖片

最近有網友問我thinkphp富文本編輯器如何實現上傳圖片 ,對於這個問題小編在網上查看一些資料,再根據個人經驗總結,希望小編能夠幫助到你。

工具/原料

手機
電腦

方法/步驟

首先,實現文章發布或編輯的form表單,初始化layui富文本編輯器,效果如下:文章發布表單對應的HTML代碼如下:

其中是layedit的目標元素,建立編輯器以及表單提交的js代碼如下:

實現layedit插入圖片接口需要在建立編輯器之前配置uploadImage,本例中配置代碼如上圖JS代碼所示。

layedit不提供服務端的圖片接受,需要我們在接口中實現,圖片上傳成功後返回指定格式的JSON信息,格式如下:

{

"code": 0, //0表示成功,其它失敗

"msg": "", //提示信息 //一般上傳失敗後返回

"data": {

"src": "圖片路徑",

"title": "圖片名稱" //可選

}

}

本例中用thinkPHP5實現編輯器插入圖片接口的代碼如下:

我創建了一個資源上傳的控制器,專門用來處理文件上傳相關業務,其中有關thinkPHP5上傳文件的代碼請參考TP的官方文檔,這裡不做過多解釋。

然後,發布一篇科技網際網路新聞,演示一下效果。

在第一段後面添加一張圖片,提交後效果如下:

注意事項

如有不明還需詢問專業人員。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場