百度富文本编辑器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/"文件夹中

更多关于ueditor