由於我的項目個人博客網站需要用到線上編輯器,百度的ueditor編輯器就是一個很好的編輯器。開始比較迷茫的使用,各種百度,沒有我滿意的答案,明明可以很簡單的使用。 1.首先進入ueditor官網下載,這個很簡單吧!這裡可以下載: https://ueditor.baidu.com/website/d ...
由於我的項目個人博客網站需要用到線上編輯器,百度的ueditor編輯器就是一個很好的編輯器。開始比較迷茫的使用,各種百度,沒有我滿意的答案,明明可以很簡單的使用。
1.首先進入ueditor官網下載,這個很簡單吧!這裡可以下載:
https://ueditor.baidu.com/website/download.html 因為我用的javaweb,所以用的jsp
2.添加必要的配置。下載後解壓出來的文件夾的名字是 ueditor1_4_3_3-utf8-jsp 這裡面有個子文件夾叫 utf8-jsp 。
a.新建一個文件夾名字ueditor,然後把utf8-jsp文件里的所用東西複製到ueditor,然後把ueditor放到你的項目里。(我的是maven項目 )
當然了,要把ueditor > jsp > lib下的jar包複製到WEB-INF > lib里,maven項目直接依賴:
<dependency>
<groupId>com.gitee.qdbp.thirdparty</groupId>
<artifactId>ueditor</artifactId>
<version>1.4.3.3</version>
</dependency>
3.頁面引入Ueditor,引用兩個必須的Js文件:ueditor.config.js,ueditor.all.js,和實例化ueditor。
4.這是最容易報錯的一步,請你首先找到 ueditor > jsp > controller.jsp,在controller.jsp添加一句
觀察控制台輸出了什麼,我控制台輸出的是:
/Users/mac/work/IdeaProjects/blog-system/blog-admin/target/blog-admin-1.0-SNAPSHOT/
說明瞭圖上保存的路徑在這裡,再看看 ueditor > jsp > config.json,
imageUrlPrefix這個就是訪問你項目的跟路徑名,比如我的是:http://localhost:8080/admin/edit-blog.html,那麼imageUrlPrefix的值就是admin了,然後找到控制台輸出的/Users/mac/work/IdeaProjects/blog-system/blog-admin/target/blog-admin-1.0-SNAPSHOT/裡面看看有沒有BlogImg文件夾,如果有就找到對應日期下的文件夾, 那麼你的圖片就插入成功了。但是顯示不一定成功
5.做完這些工作,那麼恭喜你ueditor就可以正常使用和上傳圖片了。
圖片上傳成功!