百度富文本编辑器整合fastdfs文件服务器上传
概述
详细
一、前言
(1）适合人群
1,java服务端开发人员
2,初级人员开发人员
3,了解spring springboot+maven
3，了解小程序开发跟前端人员接口对接
(2) 你需要准备什么？
1,积极主动学习
2,微信开发基本流程
3,java后端几大框架掌握如(spring springboot maven mybatis）
二、前期准备工作
软件环境:idea
官方下载:https://www.eclipse.org/downloads/
1丶基本需求
1，实现商品支付功能
2,项目目录结构
三、实现步骤
首先去官网下载源文件 将以下文件导入自己的项目
按照教程你需要访问index.html
这里的index.html其实这个index.html的作用也是获取同目录下的json文件来读取配置
所以导致你获取不到config.json
由于要用到文件上传 需要导入jar包 放在WEB_INF的lib目录下就行 然后右键项目buildpath一下
我这里用maven
百度ueditor maven可能会找不到 可以自己把jar放到本地仓库 我是直接放到公司maven私服上 代替config.json文件跟config.json一样 但是换成了java
package com.ueditor.util;
public class PublicMsg {
public final static String UEDITOR_CONFIG = "{\n" +
" \"imageActionName\": \"uploadimage\",\n" +
" \"imageFieldName\": \"upfile\",\n" +
" \"imageMaxSize\": 2048000,\n" +
" \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
" \"imageCompressEnable\": true,\n" +
" \"imageCompressBorder\": 1600,\n" +
" \"imageInsertAlign\": \"none\",\n" +
" \"imageUrlPrefix\": \"\",\n" +
" \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
"\n" +
" \"scrawlActionName\": \"uploadscrawl\",\n" +
" \"scrawlFieldName\": \"upfile\",\n" +
" \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"scrawlMaxSize\": 2048000,\n" +
" \"scrawlUrlPrefix\": \"\",\n" +
" \"scrawlInsertAlign\": \"none\",\n" +
"\n" +
" \"snapscreenActionName\": \"uploadimage\",\n" +
" \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"snapscreenUrlPrefix\": \"\",\n" +
" \"snapscreenInsertAlign\": \"none\",\n" +
"\n" +
" \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
" \"catcherActionName\": \"catchimage\",\n" +
" \"catcherFieldName\": \"source\",\n" +
" \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"catcherUrlPrefix\": \"\",\n" +
" \"catcherMaxSize\": 2048000,\n" +
" \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
"\n" +
" \"videoActionName\": \"uploadvideo\",\n" +
" \"videoFieldName\": \"upfile\",\n" +
" \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"videoUrlPrefix\": \"\",\n" +
" \"videoMaxSize\": 102400000,\n" +
" \"videoAllowFiles\": [\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"],\n" +
"\n" +
" \"fileActionName\": \"uploadfile\",\n" +
" \"fileFieldName\": \"upfile\",\n" +
" \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"fileUrlPrefix\": \"\",\n" +
" \"fileMaxSize\": 51200000,\n" +
" \"fileAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ],\n" +
"\n" +
" \"imageManagerActionName\": \"listimage\",\n" +
" \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\",\n" +
" \"imageManagerListSize\": 20,\n" +
" \"imageManagerUrlPrefix\": \"\",\n" +
" \"imageManagerInsertAlign\": \"none\",\n" +
" \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
"\n" +
" \"fileManagerActionName\": \"listfile\",\n" +
" \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\",\n" +
" \"fileManagerUrlPrefix\": \"\",\n" +
" \"fileManagerListSize\": 20,\n" +
" \"fileManagerAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ] \n" +
"\n" +
"}";
/**
* Ueditor的返回状态类型
*/
public enum UeditorMsg{
SUCCESS("SUCCESS"),ERROR("上传失败");
private String v;
UeditorMsg(String v){
this.v =v;
}
public String get(){
return this.v;
}
}
}
3.修改ueditor.config.js里的配置
Contorller接收改路径 刚开始会请求你要是拦截路径会看到xxx/controller.jsp?action=config
等于初始化的时候会先请求action=config
这时候我们直接把java的代替config.json配置返回回去
注意一下这里自定义了文件路径，本文用Vo需要返回JSON 这是支持二次开发的文档上写的返回json格式
//{state：”数据状态信息”，url：”图片回显路径”，title：”文件title”，original：”文件名称”，···}
package com.ueditor.conterller; import com.google.common.collect.Maps;
import com.ueditor.util.FastDFSClientWrapper;
import com.ueditor.util.PublicMsg;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.util.Map; @Controller
@RequestMapping("UeditorController")
public class UeditorController { @Autowired
private FastDFSClientWrapper fastDFSClientWrapper; @RequestMapping("/index")
private String showPage(){
return "index";
} @RequestMapping(value="/ueditor")
@ResponseBody
public String ueditor(HttpServletRequest request) { return PublicMsg.UEDITOR_CONFIG;
} @RequestMapping(value="/imgUpload")
@ResponseBody
public Map imgUpload(MultipartFile upfile) throws IOException { byte[] bytes = upfile.getBytes();
String originalFileName = upfile.getOriginalFilename();
String extension = originalFileName.substring(originalFileName.lastIndexOf(".") + 1);
String fileName = upfile.getName();
long fileSize = upfile.getSize();
System.out.println(originalFileName + "==========" + fileName + "===========" + fileSize + "===============" + extension + "====" + bytes.length);
String url= "http://4.105.159.213/"+fastDFSClientWrapper.uploadFile(bytes, fileSize, extension); String fileId ="ces"; return resultMap("SUCCESS",url,fileSize,fileId,fileName,extension);
} private Map<String,Object> resultMap(String state,String url,long size,String title,String original,String type){
Map<String ,Object> result = Maps.newHashMap();
result.put("state",state);
result.put("original",original);
result.put("size",size);
result.put("title",title);
result.put("type",type);
result.put("url", url);
return result;
} }
页面引入js
<script type="text/javascript" charset="utf-8" src="http://localhost:8081/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="http://localhost:8081/ueditor.all.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="http://localhost:8081/lang/zh-cn/zh-cn.js"></script>
初始化编辑器和内容
<!-- 实例化编辑器 -->
<script type="text/javascript">
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return 'http://localhost:8081/UeditorController/imgUpload';
//'http://localhost:8080/imgUpload';为方法imgUpload的访问地址
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
四、运行效果
五、补充
整个功能已经出来了下面可以安装FastDFS由于内容太不写出来了我这里提供一个安装FastDFS地址按照这地址可以搭建文件服务器的
FastDFS上传
https://www.cnblogs.com/yufeng218/p/8111961.html
注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权
百度富文本编辑器整合fastdfs文件服务器上传的更多相关文章
- Simditor 富文本编辑器多选图片上传、视频连接插入
simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...
- wangEditor富文本编辑器使用及图片上传
引入js文件 <script type="text/javascript" src="style/js/wangEditor.min.js">< ...
- 富文本编辑器TInyMCE,本地图片上传（Image Upload）
TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- Jfinal整合百度富文本编辑器ueditor
ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的action) 后台代码 package com.sandu.mega.admin.ueditor; ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- 对于MVC中应用百度富文本编辑器问题的解决办法
1.对于应用富文本编辑器post提交表单内容提示有危险的解决办法: [ValidateInput(false)] //文本编辑器的表单提交不用提示危险 [HttpPost] public Action ...
- 在MVC中应用百度富文本编辑器
1.下载.NET版本的百度富文本编辑器,前往 下载.NET版本百度富文本框 2.解压下载的.zip压缩包,将utf8-.net文件夹名称改为:ueditor,复制到MVC根目录下面.结构如下: App ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
随机推荐
- waf python build 工具使用流程
waf python build 工具使用流程 waf 的 build 理念 build 了之后,可以跟踪到 ${SRC} 和 ${TGT} 有关联的文件,只有 ${SRC} 被修改过,在下次buil ...
- SVM：SVM之Classification根据已有大量数据集案例，输入已有病例的特征向量实现乳腺癌诊断高准确率预测—Jason niu
load BreastTissue_data.mat n = randperm(size(matrix,1)); train_matrix = matrix(n(1:80),:); train_lab ...
- Codeforces 1076D Edge Deletion 【最短路+贪心】
<题目链接> 题目大意: n个点,m条边的无向图,现在需要删除一些边,使得剩下的边数不能超过K条.1点为起点,如果1到 i 点的最短距离与删除边之前的最短距离相同,则称 i 为 " ...
- Rendering React components to the document body
React一个比较好用的功能是其简单的API,一个组件可以简单到一个return了组件结构的render函数.除了一个简单的函数之外,我们还有了一段有用且可复用的代码片段. 问题 不过有时候可能会受到 ...
- nginx那些事儿
一.mac上安装nginx brew install nginx # 核心安装目录,启动文件在该目录的bin下面,欢迎页面在html下面. /usr/local/Cellar/nginx/1.12.2 ...
- sql语句1——join
注:一下内容来自于http://www.w3school.com.cn/sql/ 1. 引用两个表 我们可以通过引用两个表的方式,从两个表中获取数据: 谁订购了产品,并且他们订购了什么产品? sele ...
- 浅谈KMP“串”的模式匹配问题
感悟:预处理next[ ]数组求解B串的"自我匹配过程",思路与KMP类似,目标得到最大相同的前缀.后缀. ([1->k]==[i-k+1,i]),可以根据由前往后,利用前面 ...
- [CF768G] The Winds of Winter
Discription: 断开树的每一个点会形成一个森林,然后可以进行一次操作:将森林中的一棵树接到另一棵树上.使得森林中size最大的树size最小.依次输出对于每个结点的最小size值 Hint: ...
- BZOJ5101 : [POI2018]Powód
求出Kruskal重构树,那么重构树上每个点的取值范围是定的. 考虑树形DP,则对于一个点,要么所有点水位相同,要么还未发生合并. 故$dp[x]=up[x]-down[x]+1+dp[l[x]]\t ...
- NIOH
目录 NIOH中的双刀与阴阳术的应用 作战准备篇 2周目毕业装备: 加点: 双刀: 核心技能: 还行的技能: 被动技能: 忍术: 阴阳术: 必学: 选学: 守护灵: 隐世茶室 & 铁匠铺 出发 ...