springmvc整合百度編輯器
前言
最近搭建個人部落格站,少不了編輯器的整合,現在就分享下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 整合 百度編輯器UEditor
1、下載UEditor,這裡選擇JSP(UTF8)版本和完整原始碼 。在你的專案中引入JSP(UTF8)版本的檔案和完整原始碼對應的jsp原始碼。 2、使用maven引入對應的jar包(也可以同過直接引用ueditor自帶的包) <!--
springmvc整合百度編輯器
前言 最近搭建個人部落格站,少不了編輯器的整合,現在就分享下springMVC整合百度編輯器的一些心得。 簡單步驟 1、百度編輯器官網下載開發版的完整原始碼。官網地址,點我進去 可以選擇最新的jsp的utf8版本下載 2、將解壓後的整合資料夾拷貝到
rails 整合百度編輯器ueditor
把編輯器放到public目錄下, 我是下載的php版本, 在php版本中使用的路徑為/ueditor/php/controller.php?action=config,因為怕於rails的action衝突,我把action改為了act位於ueditor.all.js的大概80
requirejs整合百度編輯器ueditor
Ueditor版本:1.4.3.1 關鍵點: 1. 利用requirejs的shim載入editor.all.js並匯出到全域性變數 2. 通過shim的deps載入 ueditor.config.j
帝國cms 整合百度編輯器ueditor完整教程(圖文)
一、UEditor簡介 帝國cms自帶文字編輯器是fckeditor,用起來效果不太理想。 百度也推出了自己的編輯器UEditor UEditor是由WEB前端研發部開發的所見即所得的開源富文字編輯器,具有輕量、可定製、使用者體驗優秀等特點。開源基於BSD協議,所有原始碼在協
java Ueditor 百度編輯器 整合ssm後臺多圖片上傳,無縫加入專案做新增儲存
效果圖 多圖片單圖片 上傳到後臺 本地儲存。編輯框回顯,複製貼上直接用,適合實際專案中做 內容發表,發表文章等等編輯自定義上傳圖片 多圖片到後臺路徑,看了網上一推教程,走了很多彎路,簡單明瞭 ,複製貼上直接用 專案地址 https://download.csdn.net/d
織夢dedecms整合Ueditor1.4.3百度編輯器(最新版2015年12月整合)
一,去官網下載最新的php版, .本整合只修改內容文章頁面的管理器,欄目頁修改,及自定義頁面的編輯器沒法正常使用,(主要問題是沒法儲存內容或沒法上傳圖片) 如果您想編輯這兩個地方, 暫時的也是最簡單的方案就是,在編輯這兩處時,進系統設定,把 ueditor修改為以前的
百度編輯器在服務器置頂路徑 解決上傳圖片創建目錄失敗的方法(Thinkphp)
插入 borde images tor true ges border name 線上 1、設置文件夾權限2、修改/* 前後端通信相關的配置,註釋只允許使用多行方式 */{ /* 上傳圖片配置項 */ "imageActionName": "uploadimag
修復百度編輯器插入視頻的bug
問題 tar groovy util 實現 eve width 告訴 tps 修復百度編輯器插入視頻的bug,可實時預覽視頻,可修改到支持手機查看視頻開程序員的淘寶店!尋找開源技術服務夥伴!>>> 站在前人的肩膀上我們就可以站的更高,看得更遠。所以,請
百度編輯器:上傳圖片
html splay div log 監聽 conf 圖片地址 彈出 .config <!DOCTYPE html> <html> <head> <title>we234234</title> &
百度編輯器:上傳圖片二
wid 封面 def 初始 += radi var ott one <!DOCTYPE html> <html> <head> <title>we234234</title> <scrip
百度編輯器
編輯器 名稱 fig php editor 默認 限制 控制 png 文件上傳,靜態文件控制位置php/config.json * 上傳圖片配置項 */ "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
百度編輯器獨立上圖片傳配置
上傳 一個 disabled dial pos dialog image review upload 第一步 var _editor = UE.getEditor(‘editor‘); 找一個ue實例化的id input 如 第二步實例化而且調
百度編輯器(ueditor)@功能之獲取坐標
election set tor 設置 fse 隱藏 edit var 功能 //獲取百度編輯器的工具類 var domUtils = UE.dom.domUtils; //獲取編輯器的坐標
百度編輯器-Ueditor
域名 換工作 目錄 as3 表單 內部 domain 增加 sun 作者:Lionden Lionden‘s Lion Den. 又一編輯神器-百度編輯器-Ueditor (Lionden<[email protecte
百度編輯器UEditor 點擊上傳圖片選擇框會延遲幾秒才會顯示 反應很慢(轉)
php 編輯 ued 效果 all edit www. 上傳 min 轉自:http://www.blogxuan.com/php/show/323.html UEditor 編輯器點擊上傳文件選擇框會延遲幾秒才會顯示,反應很慢,上傳圖片選擇框顯示很慢。 1、uedit
React antd嵌入百度編輯器(css加載不到等問題,'offsetWidth' of null)
name config turn ... .com def value nds setw 之前有看過一些類似的文章,以為嵌入不會遇到太多坑 結果。。。 其他不說,先來描述下跳坑的過程 先定義Ueditor.js類,這個和網上版本類似 import React, {
百度編輯器上傳大視頻報http請求錯誤怎麽辦
定制 情況 limits ueditor temp 大內存 put cnblogs max 百度編輯器UEditor是由百度web前端研發部開發所見即所得富文本web編輯器,具有輕量,可定制,註重用戶體驗等特點,開源基於MIT協議,允許自由使用和修改代碼,所以受到很多開放
【ci框架基礎】之部署百度編輯器
asc 點擊 class containe 壓縮版 合並 ueditor builder 插件 在ci框架下加載編輯器,現在復習下內容。我的框架文件名稱為ci 1.下載百度編輯器ueditor,http://ueditor.baidu.com/ 一般情況下下載ubuil
vue 中 使用百度編輯器 UEditor
oat his ole text 觸發 pan ont lec 通過 已有前輩整理,記錄URL: http://www.cnblogs.com/ocean-sky/p/7132319.html http://blog.csdn.net/psd_html/article