ueditor 最新版本【1.4.3.1】单独文件/图片上传处理方法

2024-11-26 技术教程

ueditor最新版本的按照老版本的处理方式，单独上传附件一直有问题。于是没办法硬着头皮慢慢研究了，下面将方法公布如下：

首先是HTML代码：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>完整demo</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scripttype="text/javascript"charset="utf-8"src="third-party/jquery-1.10.2.min.js"></script><scripttype="text/javascript"charset="utf-8"src="ueditor.config.js"></script><scripttype="text/javascript"charset="utf-8"src="ueditor.all.js"></script><scripttype="text/javascript"charset="utf-8"src="lang/zh-cn/zh-cn.js"></script><styletype="text/css">a{color:#444;text-decoration:none;margin:0;padding:0;}dl{width:800px;margin:10pxauto;float:left;font-size:12px;}dldt{width:340px;float:left;}dldtinput{width:300px;}dldd{width:130px;float:left;margin:0;}dldda{display:inline-block;width:72px;height:28px;text-align:center;line-height:28px;border:#ddd;}dlddimg{width:90px;height:60px;}.editor{width:800px;height:300px;float:left;}</style></head><body><div><dl><dt><span>图片：</span><inputtype="text"id="picture"name="cover"/></dt><dd><ahref="javascript:void(0);"onclick="upImage();">上传图片</a></dd><dd><imgid="preview"src="/asetes/editor/p_w_picpaths/nopic.gif"/></dd></dl><dl><dt><span>文件：</span><inputtype="text"id="p_w_upload"name="p_w_upload"/></dt><dd><ahref="javascript:void(0);"onclick="upFiles();">上传文件</a></dd></dl><divclass="editor"><scripttype="text/plain"id="myEditor"></script><scripttype="text/plain"id="upload_ue"></script></div></div><scripttype="text/javascript">//编辑器vareditor=UE.getEditor('myEditor',{initialFrameWidth:800,initialFrameHeight:400,minFrameHeight:400,initialStyle:'body{font-size:12px}',topOffset:10,});//上传独立使用var_editor=UE.getEditor('upload_ue');_editor.ready(function(){//_editor.setDisabled();_editor.hide();_editor.addListener('beforeInsertImage',function(t,arg){//侦听图片上传$("#picture").attr("value",arg[0].src);//将地址赋值给相应的input$("#preview").attr("src",arg[0].src);});_editor.addListener('afterUpfile',function(t,arg){//_editor.options.filePath+$("#p_w_upload").attr("value",arg[0].url);});});functionupImage(){varmyImage=_editor.getDialog("insertp_w_picpath");myImage.open();}functionupFiles(){varmyFiles=_editor.getDialog("p_w_upload");myFiles.open();}</script>

注意 setDisabled一定要注释掉，否则会无效的：

_editor.setDisabled();

以上可以上传图片，下面要在ueditory.all.js中添加一行代码，才能单独的上传附件并赋值。位置大概在24747行上下：

me.fireEvent('afterUpfile',filelist);//添加此行me.execCommand('insertHtml',html);

位于这个模块来—E.plugin.register('insertfile', function ().....

完了就可以正常单独上传附件了。

顺便附上图片：