springboot整合ueditor
此文適合前後端分離的ueditor整合springboot,首先要理解ueditor只是個前端的js工具,絕大部分功能都是前端完成。
但是但是圖片,視頻等需要和後端交互的功能就需要稍微配置一下後端,讓那些功能能使用。
1.下載合適的ueditor版本
下載地址:https://ueditor.baidu.com/website/download.html
2.我用的是window系統,所以下載一個window版的nginx作爲前端的web服務器(就是用來訪問html靜態頁面和js的)
下載地址:http://nginx.org/en/download.html
3.搭建前端環境,你可以按照ueditor官方文檔把前端的環境搭好,但是可能會有問題,所以我採用了nginx
作爲前端的web服務器
官方文檔地址:http://fex.baidu.com/ueditor/
我的方式:
首先把下載的nginx解壓到合適的目錄,點擊下圖中的文件啓動,此時的端口爲:80
然後把下載的ueditor解壓到上圖中的html文件中,此文件放置的是前端靜態資源,目錄可以通過配置文件調整
(想了解的同學可以自行去學習:http://www.nginx.cn/doc/)
然後在html目錄中建一個demo.html文件,內容爲(此內容是從官網複製過來改了下js的引用路徑)
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加載編輯器的容器 -->
<script id="container" name="content" type="text/plain">
這裏寫你的初始化內容
</script>
<!-- 配置文件 此處引用的js用的是相對路徑,就是ueditor中的js -->
<script type="text/javascript" src="ueditor\ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="ueditor\ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
保存好了後用瀏覽器訪問:http://localhost/demo.html
此時會出現如下圖:前端功能可以使用,但是與後端相關的上傳功能不能使用
到此爲止ueditor的前端功能可以使用,與後端相關的配置請看下篇文章