百度Ueditor的基本配置和照片的上傳

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

最近剛弄了百度富文字的基本使用，拿來跟大家分享一下。

2.解壓下載的檔案

3.把這些東西都複製到你的工程的跟目錄下，這裡我以sts為例：

4.有的專案可能需要把最下方的幾個jar包再匯入一遍，不用介意，再重新匯入一遍就是了。ueditor.all.js ueditor.config.js ,ueditor.parse.js, 這三個就夠了。

5.直接開啟index.html就可以使用神奇的ueditor了。（http://localhost:8080/工程名稱/ueditor/index.html)

6.如果你想要上傳圖片，還要進行相關配置，先來看ueditor.js的配置，

注意畫紅的部分，儘量別寫錯了。

7.然後就是config.json的配置，這裡才是重頭戲，看仔細了。

千萬注意以上的兩個配置，記住了

8.配置完成，重新整理或重啟，就可以實現檔案的上傳了。

9.下面寫一下自己的測試程式碼（主要是加強自己記憶）

update.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>  
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/themes/default/icon.css" />
<link rel="stylesheet" type="text/css" href="jqueryeasyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="jqueryeasyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="jqueryeasyui/demo/demo.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jQuery.easyui.js"></script>
<script type="text/javascript" src="jqueryeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jqueryeasyui/easyui-lang-zh_CN.js"></script>

</head>
<body>
	
 <div id="mainPanle" scrolling="no" region="center" 
                 style="background: #ffffff; overflow:hidden;width: 1100px; height: 630px;margin: 15px  auto   0px   auto;overflow: hidden;padding:  0px 0px 0px  0px;border:2px #ffffff solid;"  >    

<div id="form"   style="padding:3px   auto  9px  auto;margin:67px  auto  9px  auto;width:400px;border:solid 2px #91b5e7;height:300px;">
 <c:if test="${!empty error}">
	   <c:out value="${error}" />
</c:if>   
 
 <script type="text/javascript">
var editor = new baidu.editor.ui.Editor({ 
	toolbars:[['Spechars','Emotion','InsertImage','bold','Italic','ForeColor','FontFamily','FontSize',]],
	textarea:'content' });
 editor.render("editor");
</script>

			<form action="<c:url value="addnews.html"/>" name="aname"
				style="padding: 3px auto 9px auto; margin: 67px auto 9px auto; width: 240px; border: solid 0px #91b5e7; height: 165px;"
				method="post" enctype="multipart/form-data">


				主題：<input type="text" name="theme" placeholder="描述"><br />
					模組:<input type="text" name="plate"></input> <br /> <script
						type="text/plain" id="editor" name="content"></script> <input
					type="submit" value="上傳">      <input
						type="reset" value="取消"> 備註：<br />
							1.支援的檔案格式是jpg/png/jpeg/gif<br /> 2.檔案大小應小於1M<br />
							3.請不要上傳與版權/名譽相關的圖片 <br />
						<br />
						<p></p>
							<hr></hr>
							<p>
								<p>
									<p>
										<p>
											<p></p>
										</p>
									</p>
								</p>
							</p>        
			</form>

			<div  >




<div  id="clear"></div>
		</div><!--form-->



    </div><!--mainPanle-->
<!--</div>end   mainPanle1-->




</body>
</html>

後臺接受程式碼：

@RequestMapping(value="/addnews.html")
	@ResponseBody
	public String newsAdd(Core core,HttpServletRequest request) throws ServletException, Exception
	{
		System.out.print(123);
		// 獲得表單傳過來的幾個資料
				String theme = core.getTheme();
				String content = core.getContent();
				int plate = core.getPlate();
				System.out.print(plate);
				String URL = request.getContextPath()+"/"+"ueditor/jsp";
				SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");
				Date newsDate =new Date();
			    String date =format.format(newsDate);
			    String imageURL = URL+"/upload/"+date+".jpg";
			    Core core1 = new Core();
			    core1.setTheme(theme);
				core1.setContent(content);
				core1.setPlate(plate);
				core1.setPicurl(imageURL);
				if (tryCatchCoreService.saveCore(core1)) {

					return returnStatus.Success;
				}

				else {
					return returnStatus.Fail;
				}
	}

這是自己的效果圖，雖然很醜，但是成功了。

暫時就是這樣，加強記憶，也希望對大家有幫助。

歡迎關注公眾號 IT技術自查獲取更多跟詳細的IT情報

百度UEditor的介紹和圖片上傳的使用（java）

UEditor是由百度web前端研發部開發所見即所得富文字web編輯器，並且是基於BSD協議的開源產品，允許自由使用和修改，使用起來十分方便。如果你是用來輸出編排好格式的文章或者其他文字，使用UEditor絕對是一個很不錯的選擇。 UEditor使用起來十分簡

Ueditor1.4.3百度編輯器配置（包括上傳圖片）的使用心得

第一次使用Ueditor，遇到很多問題，我使用的是開發版Ueditor1.4.3jsp的UTF-8版本的，java框架是spring MVC （一） 1）首先第一步去到http://ueditor

百度Ueditor富文字編輯器上傳圖片

百度Ueditor的基本配置和照片的上傳

最近剛弄了百度富文字的基本使用，拿來跟大家分享一下。2.解壓下載的檔案3.把這些東西都複製到你的工程的跟目錄下，這裡我以sts為例：4.有的專案可能需要把最下方的幾個jar包再匯入一遍，不用介意，再重新匯入一遍就是了。ueditor.all.js ueditor.conf

安卓百度地圖基本配置及畫線路軌跡問題

配置百度地圖進行經緯度的定位和畫折線圖軌跡以及百度地圖控制元件和ScrollView滑動衝突的問題解決。首先按照百度地圖的API把jar包還有主配置檔案還有百度key這些基本配置都給加上，確保key值是正確的。解決百度地圖控制元件和ScrollView滑動衝突問題，上程

百度ueditor工具欄和輸入框分離問題

百度ueditor富文字編輯器，當工具欄超過螢幕輸入內容會導致工具欄和輸入框分離的問題。問題原因是ueditor中有一個autoFloatEnabled屬性是否保持toolbar的位置不動,預設true;改為false可解決此問題。在頁面引用時

Struts2+Ueditor配置和圖片上傳

正文開始之前，我先說說沒什麼我要寫這篇文章，要知道在這之前我是從來不在網上寫文章的。這幾天正在做我們專業的網站（筆者是一個學生），裡面有新聞釋出的功能，於是就與Ueditor打上了交道。但是問題也隨之而來了，Ueditor圖片上傳不上去，編輯的圖片不能用。然

IPFS：基本配置、如何上傳一張圖片

1 下載IPFS軟體下載地址：https://dist.ipfs.io/#go-ipfs 開啟這個地址後網頁會根據你的當前作業系統自動為你選擇可供下載的版本，這個頁面上有很多ipfs相關的軟體下載，看清楚下載 go-ipfs, 這是IPFS的go語言版本實現，IPFS目前還有 js版本和

解決百度富文字編輯器無法上傳視訊的問題

本文轉自：http://blog.csdn.net/qq_34787830/article/details/75092347 1、在配置檔案ueditor.config.js中，定位 //xss過濾白名單，即,whitList:{ }，對 img: 增加 “_url” 屬性： 2、在下面的 vid

使用百度editor 富文字編輯器上傳圖片

在jsp 檔案中 <img src="F:/upload/image/test.jpg"/> 這樣是引不到圖片的。因為，JSP頁面在引圖片的時候是在頁面解析的路徑是:<img src="http://localhost:8080/upload/images/test.jpg">。也就

如何申請使用百度PCS API來讓檔案上傳到雲端

一：進入 http://developer.baidu.com/console#manage/apilist! 二：記錄下API Key和Secret Key 三：Server端使用百度OAuth2.0授權呼叫開放API流程詳細文件：http://develo

百度ueditor後端配置錯誤，未找到上傳資料，上傳圖片的完整步驟以及難點問題！

本人因需要編輯功能，自己鑽研加網上找文件，終於弄出了上傳功能。 1 先說原理，不用在後臺建立Action或者controller去接收ueditor上傳的檔案，你只需要設定上傳的路徑，他會自動給你上傳到該目錄下面，非常強大，並且是否帶上Html頭和尾自需

百度Ueditor 圖片上傳路徑配置

找到php資料夾中的config.json檔案，修改其中的imagePathFormat屬性 "imagePathFormat": "/blog/Data/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

百度ueditor編輯器asp版本地配置成功伺服器上不能上傳圖片提示500錯誤的解決方法

使用百度開源ueditor編輯器不能上傳圖片並報伺服器500錯誤。初看是 Uploader.Class 的 fs.CreateFolder( path ) 這條語句不能建立目錄，懷疑許可權問題，提供所有許可權後，依然不行。最後參考百度官方文件將該程式碼內函式修改A

百度ueditor富文字--配置圖片上傳

我們在之前的文章中已經學習瞭如何初始化百度ueditor富文字編輯器:官網對編輯器的初始化和使用文件是比較詳細的，這裡就不多說了。本小節主要記錄一下在初始化完編輯器之後配置啟用編輯器中的圖

ASP版百度ueditor圖片上傳提示“上傳失敗，請重試”解決辦法

在本地測試可以正常上傳，但是上傳到虛擬空間裡就不行了，可以試試這樣解決，把ueditor的asp資料夾裡面的uploader.class.asp檔案裡的CheckOrCreatePath過程修改如下： Private Function CheckOrCreate

百度UEditor圖片上傳或檔案上傳路徑自定義

最近在專案中使用到百度UEditor的圖片以及檔案上傳功能，但在上傳的時候路徑總是按照預設規則來自動生成，不方便一些特殊檔案的維護。於是開始檢視文件和原始碼，其實操作還是比較簡單的，具體如下： 1、百度UEditor檔案上傳路徑設定引數存放在config.json檔案中，如下圖所示，其中imagePathF

Spring Boot專案百度UEditor上傳圖片

業務背景 spring boot專案實現富文字框上傳圖片到富文字框中，可新增、編輯圖片儲存在獨立的FastDFS伺服器上開發步驟下載原始碼我下載的版本是【1.4.3.

asp.net mvc5 使用百度ueditor 本編輯器完整示例（上）

最近做一個專案，用到了百度ueditor富文字編輯器，功能強大，線上編輯文件，上傳圖片\視訊、附件。 MVC 模型的控制器準備： 1、建立模型。在專案中Model 資料夾中建立文章模型，注意如果要渲染的內容的模型欄位需要加上[Datype(Datatype.MultilineText)]資料註解，以

百度UEditor呼叫單圖片上傳功能的解決方法

做了個文章編輯頁面，用了百度的UEditor，文章編輯上傳圖片毫無問題，但是封面圖上傳又開始頭疼了，想呼叫UEditor那個單圖片上傳的按鈕功能，但是js這塊實在沒深入研究過，先放下，找找網上可否有解決方案，方案倒是有，但基本都是出自同一源頭，方法都是再建立一個

百度Ueditor的基本配置和照片的上傳

相關推薦