SSM框架 Jsp整合富文本編輯器ueditor 圖片上傳

一直以來都沒有成功過 這次又要用到了 就重新去配置整合 終於成功了 也對項目已經整合配置步驟熟悉了 記錄下來以後需要能看看 可以先看一遍在去配置 後面兩步可能遇到也可能遇不到 所以就放到最後了

工具/原料

Java web開發環境
ssm+maven框架項目的哦
ueditor1_4_3_3-utf8-jsp壓縮包

方法/步驟

首先我們將壓縮包解壓縮 然後打開重命名(自定義簡明一點就好)

然後將其複製到webapps文件夾下 (放在其他地方也可以,個人感覺這個路徑簡單)

然後在pom配置文件中加入如圖所示的包引入代碼(這裡是maven項目,如果不是可以直接Build Path引入)

這裡ueditor.config.js 22行修改為你的項目瀏覽器訪問路徑直到剛剛拷貝進來的文件夾哦 如圖所示

然後在config.json文件中將imageUrlPrefix的值修改為你的項目瀏覽器訪問路逕到項目名稱結束(和上一步不一樣哦,我這裡是少一級)

此時運行控制台會出現找不到文件夾,頁面無法顯示等錯誤 只需要在web配置文件中加入這些即可(原因是過濾器將靜態文件過濾了,當然可以在spring-mvc中加入一些代碼,建議這裡加哦)

然後在你項目中需要用到的地方加入紅框中的代碼 TEXTAREA的name屬性的值就是你的欄位的值哦

然後我在後台的獲取代碼如圖所示 如果成功就會寫入到資料庫中了

如圖所示 這裡是我們運行後頁面的效果  輸入數據自己修改格式 點擊圖片上傳(多圖上傳也可以) 然後圖片就顯示到編輯框中了 點擊提交

這裡是提交後寫入到資料庫 然後讀取出來的哦 (就不詳細貼代碼了)

最後如果你的上傳單個圖片按鈕不能點擊  將編輯器文件夾下的包複製到項目的lib文件夾中就可以了 紅框中的就可以了 其他的應該已經存在了 配置到此結束 希望你能夠成功哦

如圖所示 如果你複製到項目中後出現紅叉 別慌直接右鍵單擊該文件多個也可以然後依次選擇如圖所示的選項 即可

注意事項

說實話我對這個配置還不能說很精通 算是誤打誤撞配置好了 就改了這些地方其他的沒動
如果幫到你了 點個讚哦 有什麼疑問可以提出來 共勉

相關文章

  1. Django 整合富文本tiny_mce之圖片上傳

    晚上散步回來就現在了,不想看書了隨便寫點東西吧!今天我們來看下Django框架下使用富文本tiny_mce的圖片上傳功能,來補充下前面兩片關於富文本編輯器的博文:這個功能很實用的,只要開發博客類的網站 ...
  2. 富文本編輯器UEditor的使用

    對於我們web開發來說,富文本的編輯器是比不可少的,好的富文本編輯器可以讓我們用戶有更好的體驗效果,帶來更多的用戶好評,今天給大家介紹百度推出的富文本編輯器的使用方法,其優秀的ui設計會讓我們眼前一亮 ...
  3. 富文本編輯器UEditor的配置使用方法

    UEditor是由百度前端研發團隊研發的所見即所得富文本web編輯器,具有輕量.可定製.注重用戶體驗等特點,開源基於MIT協議,允許自由使用和修改代碼.UEditor使用起來比較方便,功能強大,可滿足 ...
  4. 百度富文本編輯器ueditor怎麼使用

    有時候我們想使用ueditor富文本編輯器,怎麼操作呢,下面來分享一下方法 工具/原料 電腦 ueditor 方法/步驟 第一步我們創建一個web項目,將官網下載的ueditor放在根目錄下面,並將自 ...
  5. 富文本編輯器ckeditor 圖片大小怎麼自動適應

    ckeditor是一款常用的文本編輯器,用戶可以在ckeditor上自由的編輯文本以及圖片,也可以自由的設計排版和樣式. 工具/原料 ckeditor 圖片 方法/步驟 首先,我們進入到ckedito ...
  6. 如何修改ueditor圖片上傳路徑和前端寬度、長度

    Ueditor是百度出品的一個所見即所得的編輯器,經常會用在網站中富文本編輯中,下面我說一下如何修改ueditor的顯示寬度.長度以及圖片視頻上傳後保存路徑. 工具/原料 ueditor 1.4.3. ...
  7. 關於百度UEditor圖片上傳尺寸大小設置

    Ueditor是百度出品的一個所見即所得的編輯器,經常會用在網站中富文本編輯中,但是圖片太大經常會超出滾動條.Ueditor簡單圖片上傳和多圖片上傳.下面我就以上兩點說一下如何修改ueditor圖片上 ...
  8. Editor編輯器配置圖片上傳調用路徑教程

    我是編程和代碼的菜鳥,很多站長都和我遇到過圖中這樣的問題,圖片從後台Editor編輯器上傳了但發布後卻不顯示.今天給大家帶來的是Editor編輯器配置圖片上傳調用路徑教程,解決網站Editor編輯器上 ...
  9. JSP頁面引入Ueditor富文本編輯器(1)

    最近做項目時,需要用到富文本編輯器,使用了百度的Ueditor編輯器,因此 在這和大家分享下 工具/原料 myeclipse,ueditor 方法/步驟 從官網上 http://ueditor.bai ...
  10. ueditor富文本編輯器過濾及添加代碼修改筆記

    關於百度ueditor富文本編輯器過濾及添加代碼修改筆記 方法/步驟 一.不過濾style或script 首先在ueditor.all.js文件內搜尋allowDivTransToP,找到如下的代碼, ...
  11. 在網站項目中加入富文本編輯器

    在網站項目中加入富文本編輯器 工具/原料 電腦,代碼編輯器 在網站項目中加入富文本編輯器: 1.下載富文本編輯器的文件夾. 2. 把編輯器文件包放到自己的項目中 ① 引入3個核心js文件 ② 製作一個 ...
  12. 如何將word內容粘貼到富文本編輯器裡面

    很多時候我們用一些管理系統的時候,發布新聞.公告等文字類信息時,希望能很快的將word裡面的內容直接粘貼到富文本編輯器裡面,然後發布出來.減少排版複雜的工作量. 下面是借用百度doc 來快速實現這個w ...
  13. 簡單 好用 的 html5 富 文本編輯器-Redactor

    Redactor 美麗的和易於使用的所見即所得的html編輯器,不過不支持 IE6 瀏覽器,很簡單吧 工具/原料 jquery-1.7 方法/步驟 <!DOCTYPE html> < ...
  14. 百度富文本框UEditor自定義工具欄圖標

    UEditor是由百度web前端研發部開發所見即所得富文本web編輯器,具有輕量,可定製,注重用戶體驗等特點,開源基於MIT協議,允許自由使用和修改代碼. 對於自定義的工具欄圖標,UEditor也有提 ...
  15. 用js編寫在線富文本編輯器

    教你用js編寫一個網頁在線編輯器,需要有網頁製作基礎,好了接下來跟個我來學吧! 工具/原料 html+css+js基礎.dreamewere或者sublime或記事本等任何一款網頁編輯器 方法/步驟 ...
  16. jQuery富文本編輯器插件wysiwyg.js使用攻略

    wysiwyg.js是一款十分強大的.所見即所得的jQuery富文本編輯器插件.wysiwyg.js富文本編輯器體積小,支持選擇.鍵盤.占位等眾多事件.而且該富文本編輯器的兼容性十分好,甚至兼容IE6 ...
  17. WordPress增強富文本編輯器TinyMCE Advanced

    WordPress是一個強大的博客工具,最近我也試試準備弄個分享點好玩的,作為新手在其中發現了不少問題~比如他的這個編輯器真是非常的難用啊!所以想辦法增強一下~由於是新手,更改代碼什麼的還不是很熟練, ...
  18. Django如何添加富文本編輯器?

    Django寫網站,需要一個富文本編輯器.根據不重複造輪子的原則,我決定去用一個開源的.於是我找到了強大無比的CKEditor. 工具/原料 Django 項目 CKEditor 方法/步驟 去官網下 ...
  19. php調用kindeit富文本編輯器

    kindeit,著名的富文本編輯器. 工具/原料 官網下載kinedit富文本編輯器. 自己買的主機建立的網站. 方法/步驟 在<head></head>之間添加調用編輯器代碼 ...
  20. 怎樣存儲富文本編輯器編輯的內容

    在使用富文本編輯器的時候,很多小夥伴可能不知道如何正確的去保存內容,今天小編就來給大家說一下該如何正確保存吧. 工具/原料 富文本編輯器 攻略 一般我們在提交數據的時候,都是會帶有html標識的,為了 ...