批量上传的图片在线管理没法查看图片 是因为jar包本身的Bug,这里暂时做了个替换展示。就是找到Img.js  然后搜索

img.set 替换下就好了

var url=list[i].url ;
                    url=url.replace("D:/JavaWorkSpace/.metadata/.me_tcat7/webapps/WebEUEdit","");
                   
                    //img.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?

') == -1 ? '?

noCache=':'&noCache=') + (+new Date()).toString(36) );
                    // img.setAttribute('_src', urlPrefix + list[i].url);
                    img.setAttribute('src', urlPrefix +url + (url.indexOf('?

') == -1 ?

'?

noCache=':'&noCache=') + (+new Date()).toString(36) );
                    img.setAttribute('_src', urlPrefix +url);
                    domUtils.addClass(icon, 'icon');

API地址

http://fex.baidu.com/ueditor/#server-jsp

用起来感觉非常easy。主要配置什么的就不多说了。就把环境。这里主要是解说下我怎么搭的环境。还有经常使用的ToolBar配置,其它的视频上传路径什么的就去看api吧

UMeditor为眼下最好用简单的富文本编辑器,当中的各种文件上传等等差点儿不用配置,仅仅须要拷贝样例代码就好了

第一部:下载相应语言的源代码包,我的是jsp版。里面的index.html是最全的完整案例

第二部:新建一个webproject,而且在webroot以下穿件一个目录用来放这个富文本插件,把上面下载的全部东西复制到这个目录里面

第三部:把EU/jsp以下的jar包复制到lib以下,记住必须是拷贝进去,不能引入到项目,否则会报错。

測试是否部署成功。

直接执行项目 输入地址

http://localhost:8080/WebEUEdit/EU/jsp/controller.jsp?action=config ,假设以下提示是一个js的。文本显示就说明正确了

页面显示结果Like这样

{"snapscreenInsertAlign":"none","videoPathFormat":"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}","videoFieldName":"upfile","fileManagerActionName":"listfile","fileUrlPrefix":"","imageUrlPrefix":"","imageAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"videoAllowFiles":[".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid"],"filePathFormat":"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}","fileMaxSize":51200000,"fileManagerListPath":"/ueditor/jsp/upload/file/","catcherUrlPrefix":"","videoActionName":"uploadvideo","scrawlInsertAlign":"none","videoUrlPrefix":"","imageManagerUrlPrefix":"","scrawlUrlPrefix":"","imageFieldName":"upfile","fileManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"imageMaxSize":2048000,"catcherPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","imageManagerInsertAlign":"none","scrawlFieldName":"upfile","imagePathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlActionName":"uploadscrawl","imageManagerActionName":"listimage","imageActionName":"uploadimage","imageManagerListSize":20,"imageManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"fileAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"snapscreenActionName":"uploadimage","fileFieldName":"upfile","fileActionName":"uploadfile","catcherActionName":"catchimage","fileManagerListSize":20,"catcherAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"snapscreenPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","imageCompressBorder":1600,"snapscreenUrlPrefix":"","imageCompressEnable":true,"catcherLocalDomain":["127.0.0.1","localhost","img.baidu.com"],"imageManagerListPath":"/ueditor/jsp/upload/image/","imageInsertAlign":"none","catcherMaxSize":2048000,"videoMaxSize":102400000,"fileManagerUrlPrefix":"","scrawlPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlMaxSize":2048000,"catcherFieldName":"source"}

上面  就是代表代码已经部署上去  以下是使用

在一个jsp页面上这样写代码

引入一下3个

<script type="text/javascript" charset="utf-8" src="EU/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="EU/ueditor.all.min.js"> </script>
    <!--建议手动加在语言,避免在ie下有时由于载入语言失败导致编辑器载入失败-->
    <!--这里载入的语言文件会覆盖你在配置项目里加入的语言类型。比方你在配置项目里配置的是英文。这里载入的中文,那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="EU/lang/zh-cn/zh-cn.js"></script>

<body>

<script id="editor" type="text/plain" style="width:1024px;height:500px;">这个就是富文本的元素</script>

<button οnclick="getContent()">获得内容</button>

<script type="text/javascript">

//实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例。假设在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');
   
     function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法能够获得编辑器的内容");
        arr.push("内容为:");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }
</script>

</body>

经过上面 訪问jsp页面  就好了  当中文件上传什么的 所有不须要配置了,仅仅须要自己去配置相关文件上传路径就好了这个能够去看api 系统默认的上传路径是webroot下的edit文件,里面有img file 等等类型的文件上传

最后效果

关于富文本上面的toolbar可在这里配置

相关上传文件的配置 能够再这里自己去看

UMeditor百度富文本编辑器的使用相关推荐

  1. html 组件化 编辑器,vue.js组件化使用百度富文本编辑器(一)

    注意: 本文采用的编辑器为:idea 1.下载百度富文本编辑器,地址:https://ueditor.baidu.com/website/download.html#ueditor 2.加入到stat ...

  2. Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  3. 百度富文本编辑jsp上传_百度富文本编辑器教程,从入门到放弃

    原标题:百度富文本编辑器教程,从入门到放弃 百度UEditor 资源与项目分离-完全教程 夏老师人真好 又求到一篇技术贴 来来来 继续掏出小本本 什么是百度UEditor? 百度UEditor是一款富 ...

  4. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  5. UEditor 百度富文本编辑器 .Net实例

    转自 http://download.csdn.net/download/hdsslxl/6740605 1.UEditor 百度富文本编辑器完整版 .Net实例 已解决上传图片问题. 2.内附完整d ...

  6. 百度富文本编辑器ueditor在https协议下无法正常插入动态地图

    在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...

  7. 百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法

    百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...

  8. vue使用百度富文本编辑器(ueditor)

    文章目录 vue使用百度富文本编辑器(ueditor) 1.进入官网或者github下载源码 2.使用grunt编译 4.安装`vue-ueditor-wrap` 5.组件中引入,自定义组件 6.后端 ...

  9. 百度富文本编辑器(ueditor)的使用

    项目中遇上了百度富文本编辑器的使用,官网上给出的文档不够详尽,这里将本人开发项目时遇上的需求配置和问题记录下来. 注:刚开始记录遇到的问题,总结不够多,只能持续更新,作为自己的一个代码经验总结.能做到 ...

最新文章

  1. 汇编语言的div指令 ax dx bx
  2. mysql存储引擎6_Mysql各种存储引擎对比总结
  3. javascript 权威指南第7版_免费领书 | 气相色谱与质谱实用指南(原著第2版)
  4. 用第三方工具类,将JavaBean、List、MapString,Object转成JSON文本
  5. 为多孔介质的当量直径_多孔介质流建模简介
  6. brackets ubuntu
  7. python环境准备_一键实现Python环境准备
  8. linux查看php执行用户,在浏览器中打开php文件时,是Linux中的哪个用户执行的?...
  9. ENVI5.1中Landsat 8数据大气校正
  10. matlab中单位格式,[转载]matlab中的数据显示格式-format
  11. Python 深度学习常用包汇总
  12. 破解校园网锐捷无法开热点问题
  13. QC4+充电协议_坚果R1原装QC4+充电器评测:兼容USB PD3.0/PPS/QC3.0
  14. 【STM32】 STM32单片机IO引脚配置方式
  15. 吉比特2021秋招数据分析笔试
  16. 2023微信手机号筛选器,快速检测出开通微信的号码,检测国外号码过滤微信状态,判断qq是否开通微信软件
  17. landesk桌面管理服务器安装篇
  18. GitHub每月优秀热门项目推荐:2021年11月
  19. python爬虫工资高吗_月薪2万的爬虫工程师,Python需要学到什么程度?
  20. 使用EasyExcel下载,文件名乱码问题处理

热门文章

  1. eclipse如何汉化,把eclipse改成中文版
  2. e66java存档,1000d
  3. matlab所有峰值,局部最大
  4. 视频教程-华为HCNP网络工程师【从入门到精通】自学视频[肖哥] ¥499-华为认证
  5. Origin绘图格式细节
  6. 工字型钢弹性截面模量计算公式_型钢计算公式2
  7. c语言 DES加密解密在线单元测试 填充方式
  8. UTF-8编码方式汉字和英文各占据的字节数
  9. ols最小二乘法是什么|OLS最小二乘法是如何推导的
  10. 扎拉赞恩 服务器 微信群,魔兽世界怀旧服1至60级练级任务攻略——部落篇1