1. <div>
  2. <h1>完整demo</h1>
  3. <form method="post" name="form">
  4. <div id="editor" name="content" style="width:800px;height:500px"></div>
  5.  
  6. <div id="editor2" name="content" style="width:800px;height:500px"></div>
  7.  
  8. </form>
  9. </div>
  10. <div><input type="button" value="提交" onclick="t()"></input></div>
  11.  
  12. 三、创建ue对象实例
  13. <script type="text/javascript">
  14.  
  15. //实例化编辑器
  16. //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
  17. var ue = UE.getEditor('editor',{
  18. toolbars: [
  19. ['source','subscript','superscript', 'undo', 'redo', 'bold', 'snapscreen','preview', 'simpleupload','insertimage', 'emotion',
  20. 'spechars', 'drafts' , 'time','date']
  21. ],
  22. autoHeightEnabled: true,
  23. autoFloatEnabled: true,
  24. imageActionName:'testUpload'//定义上传的action名称
  25. });
  26.  
  27. UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
  28. UE.Editor.prototype.getActionUrl = function(action) {
  29. if (action == 'testUpload') {//跳转到后来的上传action
  30. return '${pageContext.request.contextPath}/testEditor/testUpload.action';
  31. } else {
  32. return this._bkGetActionUrl.call(this, action);
  33. }
  34. }
  35.  
  36. function t(){
  37. form.action="${pageContext.request.contextPath }/testEditor/testForm.action";
  38. form.submit();
  39. }
  40.  
  41. </script>
  1. package com.jeeplus.common.utils;
  2.  
  3. import java.io.File;
  4. import java.util.HashMap;
  5. import java.util.Map;
  6.  
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9.  
  10. import org.springframework.stereotype.Controller;
  11. import org.springframework.ui.Model;
  12. import org.springframework.web.bind.annotation.RequestMapping;
  13. import org.springframework.web.bind.annotation.RequestMethod;
  14. import org.springframework.web.bind.annotation.RequestParam;
  15. import org.springframework.web.bind.annotation.ResponseBody;
  16. import org.springframework.web.multipart.MultipartFile;
  17.  
  18. /**
  19. * 百度富文本框图片上传功能
  20. *
  21. * @author zhaoshan
  22. *
  23. */
  24. @Controller
  25. @RequestMapping(value = "${adminPath}/ueditor/uploadimage")
  26. public class UEditorImgUploadUtils {
  27.  
  28. /**
  29. * 富文本文件上传功能
  30. *
  31. * @param model
  32. * @param file
  33. * 上传文件
  34. * @param request
  35. * @param response
  36. * @return 图片回显Map
  37. * @throws Exception
  38. */
  39. @RequestMapping(value = "upload", method = RequestMethod.POST)
  40. @ResponseBody
  41. public Map<String, Object> testUpload(Model model,
  42. @RequestParam(value = "upfile", required = false) MultipartFile file, HttpServletRequest request,
  43. HttpServletResponse response) throws Exception {
  44. request.setCharacterEncoding("utf-8");
  45. response.setCharacterEncoding("utf-8");
  46. Map<String, Object> result = new HashMap<String, Object>();//
  47. String fileName = file.getOriginalFilename();
  48. String filePath = request.getSession().getServletContext().getRealPath("/upload/");
  49. File targetFile = new File(filePath, fileName);
  50. if (!targetFile.exists()) {
  51. targetFile.mkdirs();
  52. }
  53. try {
  54. file.transferTo(targetFile);
  55. } catch (Exception e) {
  56. e.printStackTrace();
  57. }
  58. result.put("name", file.getOriginalFilename());// 新的文件名
  59. result.put("originalName", file.getOriginalFilename());// 原始文件名
  60. result.put("size", file.getSize());
  61. result.put("state", "SUCCESS");
  62. result.put("url", request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
  63. + request.getContextPath() + "/upload/" + fileName);// 展示图片的请求url
  64. return result;
  65. }
  66. }

ueditor 编辑器,自定义图片上传的更多相关文章

  1. ueditor 百度编辑器 自定义图片上传路径和格式化上传文件名

    今天项目中需要自定义图片上传的保存路径,并且不需要按照日期自动创建存储文件夹和文件名,我的ueditor版本是1.3.6.下面记录一下我配置成功的方法,如果有什么不对的地方欢迎指出,共同学习: 1:我 ...

  2. vue项目富文本编辑器vue-quill-editor之自定义图片上传

    使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...

  3. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  4. UMEditor(Ueditor mini)修改图片上传路径

    UMEditor(Ueditor mini)修改图片上传路径 imageUp.ashx string pathbase = "/UpLoad/images/"; //保存文件夹在网 ...

  5. ASP利用xhEditor编辑器实现图片上传的功能。

    本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...

  6. kindeditor编辑器和图片上传独立分开的配置细节

    关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...

  7. 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

    富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

  8. 关于富文本编辑器—UEditor(java版)的使用,以及如何将UEditor的文件/图片上传路径改成绝对路径

    突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行.既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题. 大家可能经常会用到富文本编辑器,今天我要说的是UEdito ...

  9. rails使用bootstrap3-wysiwyg可视化编辑器并实现自定义图片上传插入功能

    之前在rails开发中使用了ckeditor作为可视化编辑器,不过感觉ckeditor过于庞大,有很多不需要的功能,而且图片上传功能不好控制不同用户可以互相删除图片,感觉很不好.于是考虑更改可视化编辑 ...

  10. 百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法

    使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传 ...

随机推荐

  1. Qwiklab'实验-CloudFront, EFS, S3'

    title: AWS之Qwiklab subtitle: 3. Qwiklab'实验-CloudFront, EFS, S3' date: 2018-09-21 17:29:20 --- Introd ...

  2. easyUI datagrid表头的合并

    图列: js代码 function initConfigTable(param){ $("#mulConfigureTableBox").empty(); $("#mul ...

  3. oracle中单引号的处理

    当想让输出的结果中字段带有单引号', 场景一:连续三个单引号''' select '''helin''' from dual; ---'helin' 场景二:拼接字段的结果集--连续4个单引号 sel ...

  4. [CTSC1999][网络流24题]家园

    题目:洛谷P2754. 题目大意:有$n$个空间站,$m$个飞船,每个飞船有各自的停靠站点,并且从第一个停靠站点开始,不断循环.每个飞船有不同的容量(-1为月球,0为地球).每个飞船初始停在第一个停靠 ...

  5. luogu 自适应Simpson2

    自适应simpson2 题意 求一个不定积分 解法 画出函数的图像,可以知道其在0处函数值趋近于 $ + \infty $,在10处趋近于0,所以我们从0积分到10就可以了(保险起见,积到15) 代码 ...

  6. [USACO 2009 Feb Gold] Fair Shuttle (贪心+优先队列)

    题目大意:有N个站点的轻轨站,有一个容量为C的列车起点在1号站点,终点在N号站点,有K组牛群,每组数量为Mi(1≤Mi≤N),行程起点和终点分别为Si和Ei(1≤Si<Ei≤N).计算最多有多少 ...

  7. selenium chrome.options禁止加载图片和js

    #新建一个选项卡 from selenium import webdriver options = webdriver.ChromeOptions() #禁止加载图片 prefs = { 'profi ...

  8. IDEA使用操作说明(自己总结)

    1.idea导入一个项目后,如何再导入另一个项目 首先,点击File-->new-->Module from Existing Sources...-->找到该项目所在位置,选中该项 ...

  9. java--web学习总结<转>

    http://www.cnblogs.com/xdp-gacl/p/3729033.html

  10. IOS版本号被拒的经历

    IOS版本号被拒的经历: 1,登陆方式依赖外部平台 由于我们的APP是仅仅用微博登陆.想做成类似meerkat类型的.也能各种消息都同步微博. 结果当然行不通,这个确实是不听好人言.网上多个人都说过这 ...