富文本編輯器UEditor的使用

對於我們web開發來說,富文本的編輯器是比不可少的,好的富文本編輯器可以讓我們用戶有更好的體驗效果,帶來更多的用戶好評,今天給大家介紹百度推出的富文本編輯器的使用方法,其優秀的ui設計會讓我們眼前一亮。首先來看下,編輯器的樣式,效果不錯吧,基本上我們所想到的內容都在。

工具/原料

UEditor,jquery

方法/步驟

第一步需要引入UEditor的源文件,和jquery文件,來對編輯器進行支持。如果看到圖二的效果則說明部署成功咯,接下來我們就可以根據自己的實際需求來進行場地參數。

第二步獲取編輯器的輸入的文本內容,然後對獲取的值傳遞給後台處理,也可通過from表單進行操作。

配置文件上傳,圖片上傳、截圖上傳路徑(以jsp為例)

首先配置ueditor.config.js來初始化ueditor的安裝路徑,projectName代表項目路徑URL則表示,配置後的ueditor的所在路徑(可自定義),詳細配置可看圖片所示

配置好路徑後我們就可以調用了,接下來需要配置上傳文件的路徑了(jsp/config.json)里,需要配置的有imageUrlPrefix圖片訪問的路徑前綴,imagePathFormat/scrawlPathFormat 等*PathFormat路徑用來表示上傳的文件路徑(注意:windows 和linux的路徑不同方式),具體配置如圖所示

在項目中添加ueditor說需要的jar包文件,然後啟動項目。

項目啟動完成後,進入頁面,我們可以來試試效果,大家可以任意複製圖片,上傳文件等來實驗下我們的配置結果。出現如下結果則說明我們配置成功了,簡單吧。

注意事項

上傳路徑的配置及目錄設置win版和linux版本不同
linux版本上傳路徑要注意目標目錄的權限問題

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