百度富文本 总结
百度富文本 使用總結:
java ?vue+springboot+mybatis
開始不知道jsp文件里面的jar及相關文件為什么加載不到,后來直接不用jsp及下面的文件稍微改變配置文件的存放地址和參考其他同學加載配置,就解決了問題。
功能確實強大而且頁面也比較不錯,文檔清晰簡潔,但是使用上傳圖片功能的時候也是和各位同胞一樣遇到了問題,感覺必須要做個記錄了,也算自己留個文檔,具體的配置步驟如下:
第一步:當然是下載百度富文本 插件:
下載后的
第二步:在自己的項目目錄static下新建文件夾ueditor?將圖片2 中除jsp文件夾外全部復制到項目下新建的ueditor文件下,將jsp中的配置文件復制到項目目錄resources文件夾下,在工具包中新建ueditor工具包將以下第三張圖片中的全部文件復制進去文件下載地址:https://download.csdn.net/download/zlnewcsdn/10762558?或者?鏈接:https://pan.baidu.com/s/1wsx3ApYoDGtj5cmRX58jRg?
提取碼:14hq?
添加如下jar
<dependency><groupId>com.github.qiuxiaoj</groupId><artifactId>ueditor</artifactId><version>1.1.1</version></dependency><dependency><groupId>org.json</groupId><artifactId>json</artifactId><version>20170516</version></dependency>第三步:把所有該應用到的文件準備完畢后--我們修改上傳圖片的服務器地址和訪問地址
@RestController @RequestMapping("/ueditor") public class UeditorController extends AbstractController {@RequestMapping("/exec")public String exec(HttpServletRequest request)throws UnsupportedEncodingException {request.setCharacterEncoding("utf-8");String rootPath = request.getSession().getServletContext().getRealPath("/");return new ActionEnter( request, rootPath ).exec();} //上傳圖片地址 及 返回@RequestMapping("/uploadimage")@ResponseBodypublic Map<String, Object> uploadNewsImg(MultipartFile upfile, HttpServletRequest request) {String path = Thread.currentThread().getContextClassLoader().getResource("").getPath() + "//static//upload//";File file = new File(path);if (!file.exists() && !file.isDirectory()) {file.mkdirs();}String oldName = upfile.getOriginalFilename();String hz = oldName.substring(oldName.lastIndexOf("."));UUID uuid = UUID.randomUUID();file = new File(path, uuid.toString() + hz);String fileName = uuid.toString() + hz;Map<String, Object> result = new HashMap<String,Object>();try {upfile.transferTo(file);} catch (IllegalStateException e) {logger.error("富文本編輯器圖片上傳失敗,參數異常:"+e);} catch (IOException e1) {logger.error("富文本編輯器圖片上傳失敗io異常:"+e1);}result.put("state", "SUCCESS");result.put("url", fileName);result.put("original", "");result.put("type", hz);result.put("size", upfile.getSize());result.put("title", fileName);return result;}}當配置完服務器后,你可以訪問下http://localhost:8089/XXXX/ueditor/exec?action=config?地址 XXXXX為你自己的項目名 會出現一大長流的字符串說明配置成功了,接下來就要配置上傳圖片保存的地址了
imagePathFormat上傳的可以看以上代碼部分 上傳圖片 及返回
imageUrlPrefix 圖片訪問路徑前綴 一般為/項目名/upload/
js部分加載
// /** 富文本 ***/window.UEDITOR_CONFIG.initialFrameWidth = 784;window.UEDITOR_CONFIG.initialFrameHeight = 300;UE.getEditor('editor');UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function(action) {console.log(action);if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {//XXXX項目名return 'http://localhost:8089/XXXX/ueditor/uploadimage';} else if (action == 'uploadvideo') {// return 'http://a.b.com/video.php';return null;} else {return this._bkGetActionUrl.call(this, action);}}到此如果基本一樣的話就可以實現圖片上傳保存,及回顯的功能了
后期如有問題再補充
如有不足請多指教!
總結
- 上一篇: 操作系统复习资料(考研+期末)
- 下一篇: jqGrid分页点击事件,点击分页的时候