ueditor 单独图片上传 转载

时间:2023-03-09 04:19:58
ueditor 单独图片上传   转载
<body>
<script type="text/javascript">
//这个是图片上传的,网上还有附件上传的
(function($) {
var image = {
editor: null,
init: function(editorid, keyid) {
var _editor = this.getEditor(editorid);
_editor.ready(function() {
//设置编辑器不可用
_editor.setDisabled();
//隐藏编辑器,因为不会用到这个编辑器实例,所以要隐藏
_editor.hide();
//侦听图片上传
_editor.addListener('beforeInsertImage', function(t, args) {
//将地址赋值给相应的input
$("#" + keyid).val(args[0].src);
});
});
},
getEditor: function(editorid) {
this.editor = UE.getEditor(editorid);
return this.editor;
},
show: function(id) {
var _editor = this.editor;
//注意这里只需要获取编辑器,无需渲染,如果强行渲染,在IE下可能会不兼容(切记)
//和网上一些朋友的代码不同之处就在这里
$("#" + id).click(function() {
//弹出图片上传的对话框
var image = _editor.getDialog("insertimage");
image.render();
image.open();
});
},
render: function(editorid) {
var _editor = this.getEditor(editorid);
_editor.render();
}
};
$(function() {
image.init("myeditor", "upload");
image.show("image");
});
})(jQuery);
</script>
<script type="text/javascript">
// 必须有这个东西,不然,图片上传没法用。如果你独立上传图片,并且需要修改图片路径的话,你就模仿下面的代码
var editor = UE.getEditor('myeditor', {
imageUrl: "{:U(GROUP_NAME.'/Cases/upload/')}",
imagePath: "__ROOT__/Uploads/",
imageManagerUrl: "{:U(GROUP_NAME.'/cases/imagesManager/')}",
imageManagerPath: "__ROOT__/"
});
</script>
<form method='post' action='{:U(GROUP_NAME."/Cases/save")}' enctype="multipart/form-data">
<table class="table">
<tbody>
<tr>
<td class="title_td">标题:</td>
<td class="input_td"><input type='text' name='title' style='width: 300px'/></td>
</tr> <tr>
<td class="title_td">图片:</td>
<td class="input_td">
<input id="upload" name='upload' type="text" style='width: 300px' value=""/>
<script id="myeditor"></script>
<input type="button" id='image' value='上传图片'/> </td>
</tr> <tr>
<td colspan="2"> <input type='submit' value="提交保存"/></td> </tr> </tbody>
</table> </form>