springmvc整合百度編輯器

阿新 • • 發佈：2019-01-21

前言

最近搭建個人部落格站，少不了編輯器的整合，現在就分享下springMVC整合百度編輯器的一些心得。

簡單步驟

1、百度編輯器官網下載開發版的完整原始碼。官網地址，點我進去
可以選擇最新的jsp的utf8版本下載

2、將解壓後的整合資料夾拷貝到專案的wepapp目錄下。如圖
這裡寫圖片描述
請先忽略上方的ueditor目錄。

3、在相應的jsp頁面引入百度編輯器，並進行例項化。

<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" 
 %>
<html>
<head>
    <script type="text/javascript" src="${URL }/js/jquery.js"></script>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="${URL }/UEditor1.4.3.3/ueditor.config.js"></script 
>
    <script type="text/javascript" charset="utf-8" src="${URL }/UEditor1.4.3.3/ueditor.all.min.js"></script>
    <!--建議手動加在語言，避免在ie下有時因為載入語言失敗導致編輯器載入失敗-->
    <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別，比如你在配置專案裡配置的是英文，這裡載入的中文，那最後就是中文-->
    <script type="text/javascript" charset="utf-8" 
 src="${URL }/UEditor1.4.3.3/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="${URL }/UEditor1.4.3.3/ueditor.parse.min.js"></script>
</head>
<body>
<h2>Hello World!</h2>
    <form action="blog/add.do" method="post">
        標題：<input name="title" /><br/>
        內容：<script id="editor" type="text/plain" style="width:500px;height:600px;"></script><br/>
        <input type="button" value="新增" onclick="add()">
    </form>

    <script type="text/javascript">
        var ue = UE.getEditor('editor');
        function add(){
            alert(ue.getContent());
        }
    </script>
</body>
</html>

上面是一個簡單使用百度編輯器的一個頁面。注意引入js檔案和百度編輯器檔案的時候，我用的字首是“${URL}”，這是我配的一個網站根目錄，大家如果沒有配的話可以用“<%=request.getContextPath()%>”代替。要想了解怎麼配的，可以看我的部落格利用springMVC攔截器配置網站根目錄。

4、此時訪問上頁面，基本上文字編輯功能是可以用的，但是圖片上傳和一些彈窗介面是不可以用的。下面先解決圖片上傳的問題。
先找到config.json開啟。
這裡寫圖片描述
更改“imageUrlPrefix”為當前網站根目錄，如圖我在本地配的localhost就行了，若部署到伺服器上，要配成伺服器的ip或者域名。
下面那個“imagePathFormat”是圖片儲存的路徑。用預設的就可以。若成功上傳後會在webapp下多一個“ueditor”目錄，上傳後的圖片就在裡面
這裡寫圖片描述

接下來發現就可以用圖片上傳的功能了，但是彈框還用不了，不信可以試試點那個多圖上傳的圖示，按理說應該出來一個彈框介面，但是出現了404，因為被springMVC攔截了，編輯器中的介面都是靜態的html結尾的，所以在web.xml加入下面這段程式碼就行了。

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.html</url-pattern>
  </servlet-mapping>

springmvc整合百度編輯器

前言

簡單步驟

SpringMVC 整合百度編輯器UEditor

springmvc整合百度編輯器

rails 整合百度編輯器ueditor

requirejs整合百度編輯器ueditor

帝國cms 整合百度編輯器ueditor完整教程(圖文)

java Ueditor 百度編輯器整合ssm後臺多圖片上傳，無縫加入專案做新增儲存

織夢dedecms整合Ueditor1.4.3百度編輯器(最新版2015年12月整合)

百度編輯器在服務器置頂路徑解決上傳圖片創建目錄失敗的方法（Thinkphp）

修復百度編輯器插入視頻的bug

百度編輯器：上傳圖片

百度編輯器：上傳圖片二

百度編輯器

百度編輯器獨立上圖片傳配置

百度編輯器（ueditor）@功能之獲取坐標

百度編輯器-Ueditor

百度編輯器UEditor 點擊上傳圖片選擇框會延遲幾秒才會顯示反應很慢(轉)

React antd嵌入百度編輯器（css加載不到等問題，'offsetWidth' of null）

百度編輯器上傳大視頻報http請求錯誤怎麽辦

【ci框架基礎】之部署百度編輯器

vue 中使用百度編輯器 UEditor

springmvc整合百度編輯器

前言

簡單步驟

相關推薦