百度富文本编辑器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