精华内容
下载资源
问答
  • 用UEeditor出现上传文件IO错误的问题,最终原因你是tomcat没有temp文件夹导致,上传图片应该是会存放临时文件到temp下面,没有该文件则报错。

    用UEeditor出现上传文件IO错误的问题,最终原因你是tomcat没有temp文件夹导致,上传图片应该是会存放临时文件到temp下面,没有该文件则报错。

    展开全文
  • 项目中一些特定的功能可能需要页面中用到富文本编辑器来实现文件的输入上传等等,这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wangEditor使用文档 ...

    项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wangEditor使用文档

    1.引入相关的wangEditor.js和jquery文件:

    <head>
    <script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/static/js/wangEditor.js"></script>
    </head>
    

    2.在jsp页面创建富文本编辑器:

    1. 使用一个div标签来代表编辑器输入框,在script中给这个div输入框添加编辑器模型
    2. 提交编辑的内容需要使用textarea标签,它是将输入内容转换成html代码然后提交,form包裹起来
    3. script中先创建一个wangEditor对象,在最后用 editor.create()进行编辑器内容添加
    4. div是无法提交数据的,如果要提交输入的内容还需要把div中的数据同步到textarea标签中,使用onchange事件实现同步更新到 textarea
    <body>
    	<form action="EditorResult.jsp" method="post">
    		<!-- 添加一个div用来显示富文本编辑器 -->
    		<div id="editor"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div>
    	    <textarea name="editorval" id="text1" style="display: none"></textarea>
    	    <button type="submit">提交</button>
        </form>
        <!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
        <script type="text/javascript">
            var E = window.wangEditor	/* 创建一个对象 */
            var editor = new E('#editor')
            // 上传图片到服务器,后面加上图片地址
            editor.customConfig.uploadImgServer = '/upload' 
            //自定义name,接收的时候图片文件的那么用这个
            editor.customConfig.uploadFileName = 'upimg'
            var $text1 = $("#text1");
            /* 添加onchange事件实现textarea提交 */
            editor.customConfig.onchange = function (html) {
           		 // 监控变化,同步更新到 textarea
           		 $text1.val(html)
            }
            editor.create()
        </script>
    </body>
    

    3.可以将form提交地址中输出编辑器的内容,通过<textarea 标签的name 属性来获取:

    <body>
    	<% String val = request.getParameter("editorval");
    		out.print("当前富文本编辑器的内容:<br>");
    		out.print(val); %>
    </body>
    

    富文本编辑器样式:
    在这里插入图片描述
    接收编辑器内容并输出
    在这里插入图片描述

    4.使用富文本编辑器实现本地图片的上传:

    4.1:编辑器里可以上传本地图片也可以上传网络图片,网络图片只需要给到网络图片的链接地址编辑器会自己去引用并显示
    4.2:要实现本地图片的上传,需要在script中添加两条定义语句,分别是:配置服务器端地址就是选择图片上传后要访问的controller层的访问地址,还有一个是controller层方法中接收图片的参数名称:

    		// 上传图片到服务器,对应的是controller层的@RequestMapping("/upload")
            editor.customConfig.uploadImgServer = '/upload' 
            //自定义name,接收的时候图片文件的那么用这个,对应的是参数中的MultipartFile upimg名称
            editor.customConfig.uploadFileName = 'upimg'
    

    4.3:在web-app文件夹下新建一个文件夹用来存放图片信息:
    在这里插入图片描述

    5.在controller层新建一个文件夹用来执行图片的存储操作:

    5.1:参数包括从js中获取的自定义的图片名称 MultipartFile upimg
    5.2:先获取存放图片的文件夹的地址名称和生成一段随机的字符串用来代表存放图片的名称
    5.3:截取传来的文件的后缀名
    5.4:图片保存用upimg.transferTo()方法,upimg是传来的参数名称保存的时候生成新的文件名称
    5.5:工具类对象中存入异常状态和图片的地址等信息最后返回工具类对象

    图片上传到服务器
    @Controller
    public class UploadController {
    	@RequestMapping("/upload")
    	@ResponseBody
    	public EditorResult upload(MultipartFile upimg,HttpServletRequest request){
    		//工具类对象
    		EditorResult er = new EditorResult();
    		er.setErrno(1);
    		//获取文件地址
    		String basepath = request.getServletContext().getRealPath("/uploadimg");
    		String imgname = UUID.randomUUID().toString();
    		//文件后缀名
    		String suffix = upimg.getOriginalFilename().substring(upimg.getOriginalFilename().lastIndexOf("."));
    		//文件保存
    		try {
    			upimg.transferTo(new File(basepath+"/"+imgname+suffix));
    			//上传成功修改errno错误状态,返回路径
    			er.setErrno(0);
    			er.setData(new String[]{"/uploadimg/"+imgname+suffix});
    		} catch (IllegalStateException e) {
    			e.printStackTrace();
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    		//返回类型是固定的,这里需要一个工具类
    		return er;
    	}
    }
    

    5.6:上述方法中还用到的一个工具类,因为使用编辑器上传文件要求返回的内容是固定的errno错误代码和data数组存的是图片的线上地址:

    public class EditorResult {
    	private int errno;
    	private String[] data;
    	这里需要get和set方法
    }
    

    6.最后在springmvc中配置上传文件所需要的bean

    <!-- 配置bean来帮助实现上传文件操作 -->
    	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    	</bean>
    
    展开全文
  • 说到百度富文本编辑器ueditor(下面简称ue),我不得不给它一个大大的赞。...有了这个想法后,着手操作,理下实现思路,得出实现的关键在于监听这两个组件在编辑的插入动作。打开源码,苦心研究,皇天不负苦...

    说到百度富文本编辑器ueditor(下面简称ue),我不得不给它一个大大的赞。我们在网站建设、前端开发时,网站的内容管理就使用了它。对于它的多图片上传和附件上传,个人感觉很好用,我就琢磨着是否可以外部调用多图上传和附件上传组件为自己所用,并封装成一个插件,节省单独开发的成本。

    有了这个想法后,着手操作,理下实现思路,得出实现的关键在于监听这两个组件在编辑器里的插入动作。打开源码,苦心研究,皇天不负苦心人,终于摸索出解决方法,现在分享出来,给拥有同样想法的小伙伴,为网站建设届尽一份力。

    注:本文基于UEditor1.4.3.3版本。

    1、引入ue相关文件,写好初始代码

    为了更好的封装整一个单独的插件,这里我们要做到示例化ue后隐藏网页中的编辑窗口,并移除焦点。

    <!doctype html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>外部调用UEditor的多图上传和附件上传</title>
        <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
        <style>
                ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
                li{list-style-type: none;margin: 5px;padding: 0;}
            </style>
    </head>
    <body>
    <h1>外部调用UEditor的多图上传和附件上传示例</h1>
     
    <button type="button" id="j_upload_img_btn">多图上传</button>
    <ul id="upload_img_wrap"></ul>
     
    <button type="button" id="j_upload_file_btn">附件上传</button>
    <ul id="upload_file_wrap"></ul>
     
    <!-- 加载编辑器的容器 -->
    <textarea id="uploadEditor" style="display: none;"></textarea>
     
    <!-- 使用ue -->
    <script type="text/javascript">
     
        // 实例化编辑器,这里注意配置项隐藏编辑器并禁用默认的基础功能。
     var uploadEditor = UE.getEditor("uploadEditor", {
            isShow: false,
            focus: false,
            enableAutoSave: false,
            autoSyncData: false,
            autoFloatEnabled:false,
            wordCount: false,
            sourceEditor: null,
            scaleEnabled:true,
            toolbars: [["insertimage", "attachment"]]
        });
     
        // todo::some code
     
    </script>
    </body>
    </html>
    2、监听多图上传和上传附件组件的插入动作
    uploadEditor.ready(function () {
        // 监听插入图片
        uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
        // 监听插入附件
        uploadEditor.addListener("afterUpfile",_afterUpfile);
    });

    3、自定义按钮绑定触发多图上传和上传附件对话框的事件

    我们对id="j_upload_img_btn"和id="j_upload_file_btn"的两个button绑定触发ue多图上传和上传附件对话框的事件,这样我们才能够操作ue。

    document.getElementById('j_upload_img_btn').onclick = function () {
        var dialog = uploadEditor.getDialog("insertimage");
        dialog.title = '多图上传';
        dialog.render();
        dialog.open();
    };
     
    document.getElementById('j_upload_file_btn').onclick = function () {
        var dialog = uploadEditor.getDialog("attachment");
        dialog.title = '附件上传';
        dialog.render();
        dialog.open();
    };

    4、多图上传

    多图上传的核心在于“beforeInsertImage”动作,此动作返回已选图片的信息集合。

    function _beforeInsertImage(t, result) {
        var imageHtml = '';
        for(var i in result){
            imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"></li>';
        }
        document.getElementById('upload_img_wrap').innerHTML = imageHtml;
    }

    5、新增“afterUpfile”动作

    对于附件上传,ue源码中并未提供插入动作的相关事件,所以这里我们手动添加一个触发动作“afterUpfile”。

    打开“ueditor.all.js”,搜索代码:

    me.execCommand('insertHtml', html);   //在此代码后插入以下代码
    me.fireEvent('afterUpfile', filelist);

    这样我们就新增了“afterUpfile”事件。这里核心在于 “fireEvent”。

    6、附件上传

    上一步中我们新增了“afterUpfile”动作,这里直接监听就可以了。

    function _afterUpfile(t, result) {
        var fileHtml = '';
        for(var i in result){
            fileHtml += '<li><a href="'+result[i].url+'" target="_blank">'+result[i].url+'</a></li>';
        }
        document.getElementById('upload_file_wrap').innerHTML = fileHtml;
    }

    以下是完整代码:

    注:本文基于UEditor1.4.3.3版本。

    <!doctype html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>外部调用UEditor的多图上传和附件上传</title>
        <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
        <style>
            ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
            li{list-style-type: none;margin: 5px;padding: 0;}
        </style>
    </head>
    <body>
    <h1>外部调用UEditor的多图上传和附件上传示例</h1>
     
    <button type="button" id="j_upload_img_btn">多图上传</button>
    <ul id="upload_img_wrap"></ul>
     
    <button type="button" id="j_upload_file_btn">附件上传</button>
    <ul id="upload_file_wrap"></ul>
     
    <!-- 加载编辑器的容器 -->
    <textarea id="uploadEditor" style="display: none;"></textarea>
     
    <!-- 使用ue -->
    <script type="text/javascript">
     
        // 实例化编辑器,这里注意配置项隐藏编辑器并禁用默认的基础功能。
     var uploadEditor = UE.getEditor("uploadEditor", {
            isShow: false,
            focus: false,
            enableAutoSave: false,
            autoSyncData: false,
            autoFloatEnabled:false,
            wordCount: false,
            sourceEditor: null,
            scaleEnabled:true,
            toolbars: [["insertimage", "attachment"]]
        });
     
        // 监听多图上传和上传附件组件的插入动作
     uploadEditor.ready(function () {
            uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
            uploadEditor.addListener("afterUpfile",_afterUpfile);
        });
     
        // 自定义按钮绑定触发多图上传和上传附件对话框事件
     document.getElementById('j_upload_img_btn').onclick = function () {
            var dialog = uploadEditor.getDialog("insertimage");
            dialog.title = '多图上传';
            dialog.render();
            dialog.open();
        };
     
        document.getElementById('j_upload_file_btn').onclick = function () {
            var dialog = uploadEditor.getDialog("attachment");
            dialog.title = '附件上传';
            dialog.render();
            dialog.open();
        };
     
        // 多图上传动作
     function _beforeInsertImage(t, result) {
            var imageHtml = '';
            for(var i in result){
                imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"></li>';
            }
            document.getElementById('upload_img_wrap').innerHTML = imageHtml;
        }
     
        // 附件上传
     function _afterUpfile(t, result) {
            var fileHtml = '';
            for(var i in result){
                fileHtml += '<li><a href="'+result[i].url+'" target="_blank">'+result[i].url+'</a></li>';
            }
            document.getElementById('upload_file_wrap').innerHTML = fileHtml;
        }
    </script>
    </body>
    </html>

    原文地址:https://www.cnblogs.com/lhm166/articles/6079973.html

    让我们一起遨游在代码的海洋里!

    展开全文
  • java处理百度编辑器ueditor上传图片

    java处理百度编辑器ueditor上传的图片等多媒体文件

        开发项目过程中,一般会涉及到采用富文本编辑器处理“内容”之类的业务,而这内容中,难免会上传各种图片、视频等。而一般采用的富文本编辑器常见的有ueditor百度编辑器、widgEditor等等。我一般采用的百度编辑器ueditor。虽然ueditor可以对上传的图片进行配置,在下载的ueditor文件夹下找到config.json,就可以进行配置。如下所示:


        一般情况下,如果要求不严格,那就将上传的图片保存那个目录就好了。但是因为考虑到这种情况:“用户频繁上传 很多张图片,假设是10张,最终却只保留了一张,那么这时候服务器保存下来是那10张图片”,原因很简单,因为ueditor会在用户上传图片时就把图片移到你配置好的那个文件夹目录下,所以就出现了上面的情况。

        如果严格考虑这种情况的话,那么就需要对上传的图片进行处理了。本文就是分享如何处理这种情况!

        首先,ueditor会保留上面截图的那个图片上传目录的配置,如:/temporary/2017-07-22/image/xxxxx,这个目录随你配置,然后,不管你在百度编辑器上传了多少图片,我只需要在ueditor的content中去查找实际要保存的image,注意,在content中,你会发现里面的图片存储正是以html格式的<img>开头的,而这正是进行处理的切入点,最后,找到了所有的img标签,就进行移动的处理,移动到我们指定的文件夹目录下,并将真实路径返回替换掉content中相应的img里面的路径。

        好了,下面就是对ueditor的内容content进行处理的代码:

    /**
     * 处理百度编辑器的内容的图片:jsoup进行处理
     * author: steadyjack
     * @param content:百度编辑器的内容
     * date: 2017年6月19日 下午10:29:45
     */
    public static String manageUeditorImage(String content) throws Exception{
    	try {
    		if (!Strings.isNullOrEmpty(content)) {
    			Document doc=Jsoup.parse(content);
    			
    			Elements imageList=doc.select("img"); //处理的切入点,找img标签
    			if (imageList!=null && imageList.size()>0) {
    				for(int i=0;i<imageList.size();i++){
    					Element image=imageList.get(i);
    					String oldImage=image.toString();
    					System.out.println("原始图片:"+oldImage);
    					
    					//只会处理在百度编辑器配置好文件夹目录下的图片--可用于防止修改内容时重复处理
    					String charIndex="/temporary";
    					int index=oldImage.indexOf(charIndex);
    					if (index>0) {
    						String srcImage=oldImage.substring(index);
    						String secIndex="\"";
    						String realImagePos=srcImage.substring(0,srcImage.indexOf(secIndex));
    						System.out.println("实际的临时图片的位置: "+realImagePos);
    						
    						String newImagePos=copyFileForUeditor(realImagePos);
    						content = content.replace(realImagePos, newImagePos);
    					}
    				}
    			}
    		}
    	} catch (Exception e) {
    	}
    	return content; //最终经过图片处理后的百度编辑器的内容
    }

        

       copyFileForUeditor方法的代码如下:
    /**
     * 复制百度编辑器内的图片到指定的文件夹下 
     * author: steadyjack
     * date: 2017年6月19日 下午10:16:40
     */
    public static String copyFileForUeditor(String srcPath){
    	String rootPath=FilePath.getSystemRootPath(); //获取系统根路径--可根据自身需要自己写一个
    	String newFolder="";
    	String fileName="";
    	
    	System.out.println("系统根路径: "+rootPath);
    	try {
    		String srcRealPath=rootPath+srcPath;
    		System.out.println("原图所在的路径: "+srcRealPath);
    		
    		File oldFile=new File(srcRealPath);
    		SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
    		
    		newFolder="/files/ueditor/"+sdf.format(new Date())+"/"; //自己指定的图片最终移到的目录
    		String newFilePath=rootPath+newFolder;
    		createFold(new File(newFilePath));
    		System.out.println("新的图片所在的路径: "+newFilePath);
    		
    		fileName=oldFile.getName();
    		File newFile=new File(newFilePath+fileName);
    		FileCopyUtils.copy(oldFile, newFile);
    	} catch (Exception e) {
    		e.printStackTrace();
    	}
    	
    	return newFolder+fileName;
    }
    

    其中,FileCopyUtils使用的spring提供的工具类。
    
    
        好了,其实,思路通了,也不复杂。上述的代码我也做了相关注释,如果有相关问题的,可以评论留言,或者加入群进行讨论:

    Java开源技术交流:583522159     鏖战八方群:391619659  我叫debug


    展开全文
  • 百度编辑器单独作为图片上传文件上传功能,百度编辑器做缩略图 做thinkphpcms 的时候,用到百度编辑器, 所以把他单独出来把,使用方法, 把这个复制到自己的项目中, 把两个js 文件,和你的百度编辑器的位置...
  • 教你如何调用百度编辑器ueditor的上传图片\上传文件 html> head> scriptsrc="ueditor/ueditor1.43.config.js">script> scriptsrc="ueditor/ueditor1.43.all.min.js">script> head> body>
  • 现在很多CMS系统因为安全原因会把后台编辑上传功能给去除,但这样一来对实际使用过程造成了很多麻烦,今天我们以ASPCMS系统的FCKeditor编辑器为例,说明一下如何增加图片上传功能。 1. 打开网站后台编辑器...
  • //实例化编辑器  var o_ueditorupload = UE.getEditor('j_ueditorupload',  {  autoHeightEnabled:false  });  o_ueditorupload.ready(function ()  { o_ueditorupload.hide();//隐藏编辑
  • Dropzone做上传文件编辑功能

    千次阅读 2019-05-30 11:26:55
    这篇文章主要用来介绍 用Dropzone做上传文件编辑功能。 “批量上传”基本是一个涉及到文档、图片之类的项目的必有功能了,现在很多插件都能轻松的去实现。我呢用的就是这一Dropzone Dropzone的基本用法网上一搜一...
  • 但是后台用ueeditor来上传图片的时候,往往会发现上传的图片,显示的路径是相对路径,也就是不带域名的路径,这样pc端上传的图片,往往手机版看不到。 如何解决这个问题,其实非常简单。 ueeditor文件夹...
  • 使用UEditor编辑器自带的插件实现图片上传文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片文件上传,通过对UEditor配置轻松实现图片批量上传文件批量上传 URL= window...
  • 本文转自[打开链接](http://blog.csdn.net/u012063507/article/details/60598616)将Ueditor集成到YII...因此要想添加文件图片上传功能,应该加入以下两个标签: 文本编辑器中便出现了对应的两个选项: 但是点击上传
  • 在编辑博客 , 上传图片时,不论是什么路径上传的文件,路径都变成了”C:\fakepath\”+文件名的形式,查询了下,这是ie8下的安全设置问题。以下就是操作步骤: 工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到...
  • vue+elementUI上传图片/文件编辑是回显文件名回显文件名 回显文件名 HTML代码块: <el-form-item label="上传" :label-width="formLabelWidth" prop="file"> <el-upload style="width: 80%;" v-model=...
  • kindeditor在线编辑器的上传功能是以插件的形式附加到编辑器上的。此编辑器可以自己制作插件来加上自己想要的功能。常见的功能官方插件都已经给做好了,所以我们直接使用起来会更方便。 1.我们把插件自带的插件...
  • 2.下载后解压,把整个文件放到项目下,index页面可以删掉 3.引入必要的js 4.以上步骤都是很简单的,百度一大把,就...如果不修改配置,那么上传图片框会提示未正确配置,然后上传不了图片。那么我们就需要修改...
  • 出于兴趣爱好,前段时间自己尝试写了一个叫simple的cms,里面使用了百度ueditor编辑器,发现它的多图片上传模块很不错,用起来很方便,又可以选择已经上传好的图片。正好我又是个懒人,发现有现成的自己就不想新开发...
  • 最近使用jqGrid展示数据,上传图片功能花费了很长时间来实现,记录下来以便下次查阅。 jqGrid的colModel中有很多属性,如果需要上传图片,那么需要添加如下属性: name : "url", index : "url", ...
  • 我使用ueditor上传图片,上传的地址是我自己定义的位置,F盘。上传 成功图片回显,点击html发现路径不对,是编辑器默认的路径。这个图片 路径和文字一起保存到数据库展示到jsp页面图片肯定读取不出来的 图片: !...
  • bootstrap-fileinput上传文件的插件使用总结----编辑已成功上传过的图片ootstrap-fileinput上传文件的插件使用总结----编辑已成功上传过的图片这里所讲述的是:编辑已成功上传过的图片 参考:Initial Preview Data...
  • /* 上传图片配置项 */ "imageActionName": "uploadimage", /* 执行上传图片的action名称 */ "imageFieldName": "upfile", /* 提交的图片表单名称 */ "imageMaxSize": 2048000, /* 上传大小限制,单位B
  • 也最好用的编辑器了,尤其,其6.4版本以后支持文件批量上传功能,让我们的编辑们更是喜欢,但是,批量上传又突出了另一个问题:由于cuteEditor没有的上传文件(以插入图片功能为例)功能,只提供了按名称和按大小...
  • zyupload文件上传后,点编辑页面已经上传的要怎么回显呢
  • 因为最近项目收到一个需要添加帮助中心的需求,帮助中心需要能支持富文本编辑上传图片,多图,视频等等,原先项目中使用的是CKeditor,使用中多图上传和视频上传似乎存在一定的问题,搜寻答案无果,就决定跟换富...
  • 之前我们程序中嵌入编辑器时是能够上传本地图片文件的,数据库中保存的是图片文件的路径。但是后来我们编辑编辑内容方面碰到一些问题,所以有一段时间用的纯文本做程序。然后在编辑问题解决之后再度嵌入...
  • iOS上传文件(图片)之AFNetworking 3.0上传文件上传图片本人最近做了一个上传头像的功能,找了许多iOS上传图片的资料,特意整理了下,希望对大家有帮助! 上传图片其实也是一个post请求,但你需要请求头中告诉...
  • 前段时间项目搞了百度编辑上传图片到阿里云oss,现在手头上项目需要把百度编辑器图片文件等上传到七牛云。 于是百度上找了,有高手直接搞了一个七牛云的定制版。。 ... 下载完将ueditor引入你的项目中 ...
  • 最近用TinyMce做网页编辑器的时候,发现一个很纠结的问题 ,上传图片的时候只能一张一张上传 ,本着懒人不做重复事情的原则,于是想着怎么可以修改一下工具的js代码可以实现一次性上传多图片的目的,话不多说,先...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 108,242
精华内容 43,296
关键字:

怎么在文件编辑里上传图片