JSP版本下載地址:http://ueditor.baidu.com/website/download.html#mini
使用方法:
1.修改umeditor.config.js鹤啡,133行
2.引入js、css
<link href="../js/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="../js/umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/umeditor/umeditor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/umeditor/lang/zh-cn/zh-cn.js"></script>
//初始化富文本content對(duì)應(yīng)div的id
var um = UM.getEditor('content');
//獲取文本內(nèi)容
um.getContent();
//寫(xiě)入
um.setContent('test');
3.后臺(tái)上傳接口:
出現(xiàn)問(wèn)題:
-
圖片已經(jīng)上傳卻出現(xiàn)如下問(wèn)題:
查看image.js中submit方法源碼發(fā)現(xiàn)umeditor用的是iframe宵荒,所以會(huì)出現(xiàn)跨域問(wèn)題:
- 將submit源碼更改為:
submit: function (callback) {
var me = this,
input = $( '<input style="filter: alpha(opacity=0);" class="edui-image-file" type="file" hidefocus="" name="upfile" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp">'),
input = input[0];
$(me.dialog).delegate( ".edui-image-file", "change", function ( e ) {
if ( !this.parentNode ) {
return;
}
var xhr = new XMLHttpRequest();
xhr.open("post", me.editor.getOpt('imageUrl') + "?type=ajax", true);
//xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append(me.editor.getOpt('imageFieldName'), event.target.files[0]);
xhr.send(fd);
xhr.addEventListener('load', function (e) {
var r = e.target.response, json;
me.uploadComplete(r);
$(this).unbind('load');
$(this).remove();
});
Upload.updateInput( input );
me.toggleMask("Loading....");
callback && callback();
});
return me;
}