UMeditor百度富文本编辑器的使用
来源:互联网 发布:移动公司网络维护员 编辑:程序博客网 时间:2024/04/30 03:57
批量上传的图片在线管理没法查看图片 是由于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
用起来感觉很简单,主要配置什么的就不多说了,就把环境,这里主要是讲解下我怎么搭的环境,还有常用的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 onclick="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百度富文本编辑器的使用
- 百度富文本编辑器UMeditor的使用
- PHP接入umeditor(百度富文本编辑器)
- Angular部署百度UMEditor富文本编辑器
- JavaWeb集成百度UMEditor简易富文本编辑器
- 百度文本编辑器UMeditor在新浪SAE上的使用
- UMEditor文本编辑器的使用
- 富文本编辑器UMeditor在backbone中的使用
- 百度富文本编辑器Ueditor的使用
- 百度富文本编辑器的使用
- 百度Ueditor富文本编辑器的使用
- 百度UEdit富文本编辑器的使用
- umeditor简洁富文本使用
- 使用百度富文本编辑器
- 富文本编辑器Umeditor简单用法
- 百度编辑器umeditor使用总结
- 关于使用百度UEditor富文本编辑器的总结
- 百度富文本编辑器UEditor的使用总结
- codeforces252-B - Valera and Fruits
- three js JavaScript编写的WebGL第三方库
- android驱动的开发流程
- 黑马程序员--Java基础学习(IO流及字符编码)第二十一天
- Pascal数组
- UMeditor百度富文本编辑器的使用
- MySQL外键约束On Delete和On Update的使用
- android 内核编译问题汇总
- gson使用教程-翻译1
- mui适用场景说明,能不能在普通浏览器里使用,能否用于wap网站
- Unity优化大全(一)之开篇前言
- 天天酷跑
- android PorterDuffXfermode ,PorterDuff.Mode 使用 以及Porter-Duff规则详解
- 第5周工作周报