springboot整合ueditor 前端篇

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的前端功能可以使用,與後端相關的配置請看下篇文章

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章