1. 程式人生 > >百度富文字編輯器UEditor使用簡單示例

百度富文字編輯器UEditor使用簡單示例

HTML程式碼:

<form id="f_edit" method="post">
	<input name="id" type="hidden" value="${activityManage.id }">
	<table>
		<tr>
			<td>圖片<input type="file" name="file_updateupload" id="file_updateupload" /></td>
			<td id="updateImage"></td>
		</tr>
		<tr>
			<td>活動內容:</td>
			<td>
			<!-- 載入編輯器的容器 -->
			<script id="container" name="content" type="text/plain"></script>
			</td>
		</tr>
	</table>

	<p>
	<input type="submit" value="提交" />  <input type="reset"
	value="重置" />
	</p>
</form>

JS---UEditor:

var updateEditor;
(function() {
	UEditor();
	
})();
function UEditor(){
	if (undefined != ueditor) {
		ueditor.destroy();
	}
	
	ueditor=UE.getEditor('container', {
		toolbars: [
				   ['source', 'undo', 'redo', 'bold','italic','underline','strikethrough',
					'forecolor','lineheight','paragraph','fontfamily','fontsize','justifyleft','justifyright',
					'justifycenter','justifyjustify','simpleupload','unlink','link']
			   ],
		 initialFrameWidth:600,  //初始化編輯器寬度,預設1000
		 initialFrameHeight:300,  //初始化編輯器高度,預設320
		 readonly:true		//一載入即為只讀狀態--一般不用
	});
}
JS---UEditor----檔案上傳:
function upload(){
	$("#file_updateupload").uploadify({
		//上傳使用的 Flash
		'swf' : '/plugin/uploadify/uploadify.swf',
		//後臺處理程式的相對路徑。
		'uploader' : '/ajax/bms/news/upload',
		'method' : 'get',
		//是否自動上傳
		'auto' : true,
		// 按鈕的寬度
		'width' : 60,
		// 按鈕的高度
		'height' : 23,
		// 按鈕上的文字
		'buttonText' : "上傳",
		// 按鈕的滑鼠圖示
		'buttonCursor' : 'hand',
		// 上傳引數名稱
		'fileObjName' : 'Filedata',
		// 兩個配套使用
		// 副檔名
		'fileTypeExts' : "*.jpg;*.png",
		// 檔案說明
		'fileTypeDesc' : "請選擇 jpg png 檔案",
		//限制上傳檔案的大小
		'fileSizeLimit' : '4000KB',
		'progressData' : 'speed',
		 //上傳成功
		'onUploadSuccess':function(file, data, response) {
			var obj = JSON.parse(data);
			var newsImage=obj.data;
			alert(newsImage)
			alert("修改圖片成功");
			$("#updateImage").append("<label><input type='hidden' name='newsImage' id='newsImage' value="+newsImage+">
			<img src='"+ImageUrl+"/upload/"+newsImage+"' width='148' height='198' /></label>");

		}
	});
}
前後端通訊相關的配置:請看配置檔案config.json;位置位於"ueditor/jsp/"資料夾中

ueditor完整配置:請檢視配置檔案ueditor.config.js;位置位於"ueditor/"資料夾中