UMeditor百度富文本编辑器的使用

Posted 2020-09-23 mthoutai

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了UMeditor百度富文本编辑器的使用相关的知识，希望对你有一定的参考价值。

批量上传的图片在线管理没法查看图片是因为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个

<body>

    //实例化编辑器
    //建议使用工厂方法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 等等类型的文件上传

最后效果

技术分享