精华内容
下载资源
问答
  • 富文本编辑器中如何处理后端返回的数据中带有标签的src地址?
    2021-12-22 16:39:40
    	//新建一个imgSrcFilter.js文件
    	export default function filter(rt) {
    	    let res;
    	
    	    res = [];
    	    rt.replace(/<img[^>]*src+?=+?"+?([^"]+)"+?[^>]*\/>/g, (a, p, c, d) => {
    	        res.push(p)
    	    });
    	
    	    return res;
    	}
    
    更多相关内容
  • 前端使用 UEditor 富文本编辑器,前后端分离情况下,需要后端提供一个接口实现文件上传功能 本文根据文章:vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑] 的思路,对项目进行对应修改,配合前端...

    一、背景

    前端使用 UEditor 富文本编辑器,前后端分离情况下,需要后端提供一个接口实现文件上传功能
    本文根据文章:vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑] 的思路,对项目进行对应修改,配合前端实现 UEditor 上传功能

    二、实现步骤

    1. 源码
      在git仓库:https://github.com/coderliguoqing/UeditorSpringboot 下载源码
    2. 复制文件
    • 复制配置文件:/ueditor-demo/src/main/resources/config.json 到项目的resources 文件下
    • 复制实现类文件夹:/ueditor-demo/src/main/java/cn/com/lee/common/ueditor 到项目的工具类文件下
    • 删除多余启动类文件:/util/SpringUtil.java
    1. 修改代码
      3.1 引入maven依赖
    <dependency>
        <groupId>org.json</groupId>
        <artifactId>json</artifactId>
        <version>20201115</version>
    </dependency>
    
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.4</version>
    </dependency>
    

    3.2 新建接口,给前端调用

    /**
     * UEditor 富文本编辑器-后端文件上传功能
     *
     * @param request request
     * @return java.lang.String
     * @author linc
     * @date 2021/2/25 下午5:10
     */
    @ResponseBody
    @RequestMapping(value = "/ueditor/upload")
    public String ueditorUpload(HttpServletRequest request) throws UnsupportedEncodingException {
        request.setCharacterEncoding("utf-8");
    	String rootPath = request.getSession().getServletContext().getRealPath("/");
        return new ActionEnter(request, rootPath).exec();
    }
    

    3.3 在测试环境出现【配置文件初始化失败】的提示,本地正常

    需要修改 /util/ueditor/ConfigManager.java 文件中 initEnv 方法,读取配置部分的代码

    package com.fb.crm.util.ueditor;
    
    import java.io.*;
    import java.util.HashMap;
    import java.util.Map;
    
    import org.json.JSONArray;
    import org.json.JSONException;
    import org.json.JSONObject;
    import org.springframework.core.io.ClassPathResource;
    
    import com.fb.crm.util.ueditor.define.ActionMap;
    
    /**
     * 配置管理器
     *
     * @author hancong03@baidu.com
     */
    public final class ConfigManager {
    
        private final String rootPath;
        private final String originalPath;
        private final String contextPath;
        private static final String configFileName = "config.json";
        private String parentPath = null;
        private JSONObject jsonConfig = null;
        // 涂鸦上传filename定义
        private final static String SCRAWL_FILE_NAME = "scrawl";
        // 远程图片抓取filename定义
        private final static String REMOTE_FILE_NAME = "remote";
    
        /*
         * 通过一个给定的路径构建一个配置管理器, 该管理器要求地址路径所在目录下必须存在config.properties文件
         */
        private ConfigManager(String rootPath, String contextPath, String uri) throws FileNotFoundException, IOException {
    
            rootPath = rootPath.replace("\\", "/");
    
            this.rootPath = rootPath;
            this.contextPath = contextPath;
            this.originalPath = "src/main/resources/config.json";
    
            this.initEnv();
    
        }
    
        /**
         * 配置管理器构造工厂
         *
         * @param rootPath    服务器根路径
         * @param contextPath 服务器所在项目路径
         * @param uri         当前访问的uri
         * @return 配置管理器实例或者null
         */
        public static ConfigManager getInstance(String rootPath, String contextPath, String uri) {
    
            try {
                return new ConfigManager(rootPath, contextPath, uri);
            } catch (Exception e) {
                return null;
            }
    
        }
    
        // 验证配置文件加载是否正确
        public boolean valid() {
            return this.jsonConfig != null;
        }
    
        public JSONObject getAllConfig() {
    
            return this.jsonConfig;
    
        }
    
        public Map<String, Object> getConfig(int type) throws JSONException {
    
            Map<String, Object> conf = new HashMap<String, Object>();
            String savePath = null;
            String localSavePathPrefix = null;
    
            switch (type) {
    
                case ActionMap.UPLOAD_FILE:
                    conf.put("isBase64", "false");
                    conf.put("maxSize", this.jsonConfig.getLong("fileMaxSize"));
                    conf.put("allowFiles", this.getArray("fileAllowFiles"));
                    conf.put("fieldName", this.jsonConfig.getString("fileFieldName"));
                    savePath = this.jsonConfig.getString("filePathFormat");
                    break;
    
                case ActionMap.UPLOAD_IMAGE:
                    conf.put("isBase64", "false");
                    conf.put("maxSize", this.jsonConfig.getLong("imageMaxSize"));
                    conf.put("allowFiles", this.getArray("imageAllowFiles"));
                    conf.put("fieldName", this.jsonConfig.getString("imageFieldName"));
                    savePath = this.jsonConfig.getString("imagePathFormat");
                    localSavePathPrefix = this.jsonConfig.getString("localSavePathPrefix");
                    break;
    
                case ActionMap.UPLOAD_VIDEO:
                    conf.put("maxSize", this.jsonConfig.getLong("videoMaxSize"));
                    conf.put("allowFiles", this.getArray("videoAllowFiles"));
                    conf.put("fieldName", this.jsonConfig.getString("videoFieldName"));
                    savePath = this.jsonConfig.getString("videoPathFormat");
                    localSavePathPrefix = this.jsonConfig.getString("localSavePathPrefix");
                    break;
    
                case ActionMap.UPLOAD_SCRAWL:
                    conf.put("filename", ConfigManager.SCRAWL_FILE_NAME);
                    conf.put("maxSize", this.jsonConfig.getLong("scrawlMaxSize"));
                    conf.put("fieldName", this.jsonConfig.getString("scrawlFieldName"));
                    conf.put("isBase64", "true");
                    savePath = this.jsonConfig.getString("scrawlPathFormat");
                    break;
    
                case ActionMap.CATCH_IMAGE:
                    conf.put("filename", ConfigManager.REMOTE_FILE_NAME);
                    conf.put("filter", this.getArray("catcherLocalDomain"));
                    conf.put("maxSize", this.jsonConfig.getLong("catcherMaxSize"));
                    conf.put("allowFiles", this.getArray("catcherAllowFiles"));
                    conf.put("fieldName", this.jsonConfig.getString("catcherFieldName") + "[]");
                    savePath = this.jsonConfig.getString("catcherPathFormat");
                    localSavePathPrefix = this.jsonConfig.getString("localSavePathPrefix");
                    break;
    
                case ActionMap.LIST_IMAGE:
                    conf.put("allowFiles", this.getArray("imageManagerAllowFiles"));
                    conf.put("dir", this.jsonConfig.getString("imageManagerListPath"));
                    conf.put("count", this.jsonConfig.getInt("imageManagerListSize"));
                    break;
    
                case ActionMap.LIST_FILE:
                    conf.put("allowFiles", this.getArray("fileManagerAllowFiles"));
                    conf.put("dir", this.jsonConfig.getString("fileManagerListPath"));
                    conf.put("count", this.jsonConfig.getInt("fileManagerListSize"));
                    break;
    
            }
    
            conf.put("savePath", savePath);
            conf.put("localSavePathPrefix", localSavePathPrefix);
            conf.put("rootPath", this.rootPath);
    
            return conf;
    
        }
    
        private void initEnv() throws FileNotFoundException, IOException {
            ClassPathResource resource = new ClassPathResource("config.json");
            String configContent = readFileByInputStream(resource.getInputStream());
            try {
                JSONObject jsonConfig = new JSONObject(configContent);
                this.jsonConfig = jsonConfig;
            } catch (Exception e) {
                this.jsonConfig = null;
            }
    
        }
    
        private String getConfigPath() {
            return this.parentPath + File.separator + ConfigManager.configFileName;
        }
    
        private String[] getArray(String key) throws JSONException {
    
            JSONArray jsonArray = this.jsonConfig.getJSONArray(key);
            String[] result = new String[jsonArray.length()];
    
            for (int i = 0, len = jsonArray.length(); i < len; i++) {
                result[i] = jsonArray.getString(i);
            }
    
            return result;
    
        }
    
        private String readFileByInputStream(InputStream inputStream) throws IOException {
    
            StringBuilder builder = new StringBuilder();
    
            try {
    
                InputStreamReader reader = new InputStreamReader(inputStream, "UTF-8");
                BufferedReader bfReader = new BufferedReader(reader);
    
                String tmpContent = null;
    
                while ((tmpContent = bfReader.readLine()) != null) {
                    builder.append(tmpContent);
                }
    
                bfReader.close();
    
            } catch (UnsupportedEncodingException e) {
                // 忽略
            }
    
            return this.filter(builder.toString());
    
        }
    
        private String readFile(String path) throws IOException {
    
            StringBuilder builder = new StringBuilder();
    
            try {
    
                InputStreamReader reader = new InputStreamReader(new FileInputStream(path), "UTF-8");
                BufferedReader bfReader = new BufferedReader(reader);
    
                String tmpContent = null;
    
                while ((tmpContent = bfReader.readLine()) != null) {
                    builder.append(tmpContent);
                }
    
                bfReader.close();
    
            } catch (UnsupportedEncodingException e) {
                // 忽略
            }
    
            return this.filter(builder.toString());
    
        }
    
        // 过滤输入字符串, 剔除多行注释以及替换掉反斜杠
        private String filter(String input) {
    
            return input.replaceAll("/\\*[\\s\\S]*?\\*/", "");
    
        }
    
    }
    

    3.4 修改 /ueditor/upload/StorageManager.java 源代码中 TODO 的部分,实现上传到七牛云的功能

    package com.fb.crm.util.ueditor.upload;
    
    import java.io.BufferedInputStream;
    import java.io.BufferedOutputStream;
    import java.io.ByteArrayOutputStream;
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    
    import javax.annotation.PostConstruct;
    import javax.annotation.Resource;
    import javax.servlet.http.HttpServletRequest;
    
    import com.fb.crm.component.QiniuComponent;
    import org.apache.commons.io.FileUtils;
    import org.springframework.boot.context.properties.ConfigurationProperties;
    import org.springframework.stereotype.Component;
    
    import com.fb.crm.util.ueditor.define.AppInfo;
    import com.fb.crm.util.ueditor.define.BaseState;
    import com.fb.crm.util.ueditor.define.State;
    
    @Component
    @ConfigurationProperties(prefix = "nginx")
    public class StorageManager {
    
        @Resource
        private QiniuComponent qiniuComponent;
    
        /**
         * 维护一个本类的静态变量
         */
        private static StorageManager storageManager;
    
        /**
         * 初始化的时候,将本类中的sysConfigManager赋值给静态的本类变量
         */
        @PostConstruct
        public void init() {
            storageManager = this;
            storageManager.qiniuComponent = this.qiniuComponent;
        }
    
        public static final int BUFFER_SIZE = 8192;
    
        private static String fileurl;
    
        public static String getFileurl() {
            return fileurl;
        }
    
        public static void setFileurl(String fileurl) {
            StorageManager.fileurl = fileurl;
        }
    
        public static int getBufferSize() {
            return BUFFER_SIZE;
        }
    
        public StorageManager() {
        }
    
        public static State saveBinaryFile(byte[] data, String path) {
            File file = new File(path);
    
            State state = valid(file);
    
            if (!state.isSuccess()) {
                return state;
            }
    
            try {
                BufferedOutputStream bos = new BufferedOutputStream(
                        new FileOutputStream(file));
                bos.write(data);
                bos.flush();
                bos.close();
            } catch (IOException ioe) {
                return new BaseState(false, AppInfo.IO_ERROR);
            }
    
            state = new BaseState(true, file.getAbsolutePath());
            state.putInfo("size", data.length);
            state.putInfo("title", file.getName());
            return state;
        }
    
        public static State saveFileByInputStream(HttpServletRequest request, InputStream is, String path, String picName,
                                                  long maxSize) {
    
            State state = null;
            File tmpFile = getTmpFile();
            byte[] dataBuf = new byte[2048];
    
            try {
                //转成字节流
                ByteArrayOutputStream swapStream = new ByteArrayOutputStream();
                int rc = 0;
                while ((rc = is.read(dataBuf, 0, 100)) > 0) {
                    swapStream.write(dataBuf, 0, rc);
                }
    
                dataBuf = swapStream.toByteArray();
                swapStream.flush();
                swapStream.close();
    
                if (tmpFile.length() > maxSize) {
                    tmpFile.delete();
                    return new BaseState(false, AppInfo.MAX_SIZE);
                }
    
                // 此处调用文件上传服务,并获取返回结果返回
                String uploadUrl = storageManager.qiniuComponent.uploadBytes(dataBuf, picName);
    
                boolean success = true;
                //如果上传成功
                if (success) {
                    state = new BaseState(true);
                    state.putInfo("size", tmpFile.length());
                    //文件名填入此处
                    state.putInfo("title", uploadUrl.replace(storageManager.qiniuComponent.getBucketHost() + "/", ""));
                    //所属group填入此处
                    state.putInfo("group", "");
                    //文件访问的url填入此处
                    state.putInfo("url", uploadUrl);
                    tmpFile.delete();
                } else {
                    state = new BaseState(false, 4);
                    tmpFile.delete();
                }
    
                return state;
    
            } catch (IOException e) {
            }
            return new BaseState(false, AppInfo.IO_ERROR);
        }
    
        public static State saveFileByInputStream(InputStream is, String path, String picName) {
            State state = null;
    
            File tmpFile = getTmpFile();
    
            byte[] dataBuf = new byte[2048];
            BufferedInputStream bis = new BufferedInputStream(is, StorageManager.BUFFER_SIZE);
    
            try {
                BufferedOutputStream bos = new BufferedOutputStream(
                        new FileOutputStream(tmpFile), StorageManager.BUFFER_SIZE);
    
                int count = 0;
                while ((count = bis.read(dataBuf)) != -1) {
                    bos.write(dataBuf, 0, count);
                }
                bos.flush();
                bos.close();
    
                //state = saveTmpFile(tmpFile, path);
                //重新将文件转成文件流的方式
    //       InputStream in = new FileInputStream(tmpFile);
    //       UploadUtils uploadUtils = new UploadUtils();
    //       boolean success = uploadUtils.uploadFile(in, path, picName);
                boolean success = true;
    
                //如果上传成功
                if (success) {
                    state = new BaseState(true);
                    state.putInfo("size", tmpFile.length());
                    state.putInfo("title", tmpFile.getName());
                    tmpFile.delete();
                } else {
                    state = new BaseState(false, 4);
                    tmpFile.delete();
                }
    
                return state;
            } catch (IOException e) {
            }
            return new BaseState(false, AppInfo.IO_ERROR);
        }
    
        private static File getTmpFile() {
            File tmpDir = FileUtils.getTempDirectory();
            String tmpFileName = (Math.random() * 10000 + "").replace(".", "");
            return new File(tmpDir, tmpFileName);
        }
    
        private static State saveTmpFile(File tmpFile, String path) {
            State state = null;
            File targetFile = new File(path);
    
            if (targetFile.canWrite()) {
                return new BaseState(false, AppInfo.PERMISSION_DENIED);
            }
            try {
                FileUtils.moveFile(tmpFile, targetFile);
            } catch (IOException e) {
                return new BaseState(false, AppInfo.IO_ERROR);
            }
    
            state = new BaseState(true);
            state.putInfo("size", targetFile.length());
            state.putInfo("title", targetFile.getName());
    
            return state;
        }
    
        private static State valid(File file) {
            File parentPath = file.getParentFile();
    
            if ((!parentPath.exists()) && (!parentPath.mkdirs())) {
                return new BaseState(false, AppInfo.FAILED_CREATE_FILE);
            }
    
            if (!parentPath.canWrite()) {
                return new BaseState(false, AppInfo.PERMISSION_DENIED);
            }
    
            return new BaseState(true);
        }
    }
    
    展开全文
  • 富文本编辑器编辑的内容调用后端的接口保存再返回的数据带标签

    场景:在前端的富文本编辑器编辑内容后,调用保存接口,保存成功后返回给前端的是带标签的文本

    处理前:

    处理后: 

    如何处理:这里的处理用到了正则

    ToText(htmls) {//我这边是用到的elementui的table表格,对数组的content(保存的富文本编辑器的编辑内容)字段进行处理,所以把这个数组作为参数
          for (var i = 0; i < htmls.length; i++) {
            console.log(htmls[i].content, 'before-------')//打印处理前的数据
            let s = htmls[i].content.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ').replace(/ /g, ' ').replace(/>/g, ' ')
            htmls[i].content = s//处理好后重新赋值给这个数组
            console.log(htmls[i].content, 'after---------')
          }
        },

    亲测有效,大家快试试吧! 

     

    展开全文
  • 微信小程序富文本编辑器官方插件editor为微信小程序前端和图片接收后端,基于微信官方演示程序,去掉了多余的东西,加了一个后端接收图片的代码,直接可以使用,其他语言参照接收程序很简单。直接可以用。
  • SpringBoot后端百度富文本编辑器的做法(Java) 1.后端加载百度富文本编辑器的配置文件congfig.json,本项目放在resources下的static.ueditor下 congfig.json: { /* 上传图片配置项 */ "imageActionName": ...

     

    SpringBoot后端百度富文本编辑器的做法(Java)

    1.后端加载百度富文本编辑器的配置文件congfig.json,本项目放在resources下的static.ueditor下

    congfig.json:

    {
        /* 上传图片配置项 */
        "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
        "imageFieldName": "upfile", /* 提交的图片表单名称 */
        "imageMaxSize": 2048000, /* 上传大小限制,单位B */
        "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
        "imageCompressEnable": true, /* 是否压缩图片,默认是true */
        "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
        "imageInsertAlign": "none", /* 插入的图片浮动方式 */
        "imageUrlPrefix": "", /* 图片访问路径前缀 */
        "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                    /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                    /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                    /* {time} 会替换成时间戳 */
                                    /* {yyyy} 会替换成四位年份 */
                                    /* {yy} 会替换成两位年份 */
                                    /* {mm} 会替换成两位月份 */
                                    /* {dd} 会替换成两位日期 */
                                    /* {hh} 会替换成两位小时 */
                                    /* {ii} 会替换成两位分钟 */
                                    /* {ss} 会替换成两位秒 */
                                    /* 非法字符 \ : * ? " < > | */
                                    /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
    
        /* 涂鸦图片上传配置项 */
        "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
        "scrawlFieldName": "upfile", /* 提交的图片表单名称 */
        "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        "scrawlMaxSize": 2048000, /* 上传大小限制,单位B */
        "scrawlUrlPrefix": "", /* 图片访问路径前缀 */
        "scrawlInsertAlign": "none",
    
        /* 截图工具上传 */
        "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
        "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        "snapscreenUrlPrefix": "", /* 图片访问路径前缀 */
        "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */
    
        /* 抓取远程图片配置 */
        "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
        "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
        "catcherFieldName": "source", /* 提交的图片列表表单名称 */
        "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        "catcherUrlPrefix": "", /* 图片访问路径前缀 */
        "catcherMaxSize": 2048000, /* 上传大小限制,单位B */
        "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */
    
        /* 上传视频配置 */
        "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
        "videoFieldName": "upfile", /* 提交的视频表单名称 */
        "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        "videoUrlPrefix": "", /* 视频访问路径前缀 */
        "videoMaxSize": 102400000, /* 上传大小限制,单位B,默认100MB */
        "videoAllowFiles": [
            ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
            ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */
    
        /* 上传文件配置 */
        "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
        "fileFieldName": "upfile", /* 提交的文件表单名称 */
        "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        "fileUrlPrefix": "", /* 文件访问路径前缀 */
        "fileMaxSize": 51200000, /* 上传大小限制,单位B,默认50MB */
        "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"
        ], /* 上传文件格式显示 */
    
        /* 列出指定目录下的图片 */
        "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
        "imageManagerListPath": "/ueditor/jsp/upload/image/", /* 指定要列出图片的目录 */
        "imageManagerListSize": 20, /* 每次列出文件数量 */
        "imageManagerUrlPrefix": "", /* 图片访问路径前缀 */
        "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
        "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */
    
        /* 列出指定目录下的文件 */
        "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
        "fileManagerListPath": "/ueditor/jsp/upload/file/", /* 指定要列出文件的目录 */
        "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */
        "fileManagerListSize": 20, /* 每次列出文件数量 */
        "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"
        ] /* 列出的文件类型 */
    
    }

    2.直接写后端的controller,前端直接调用接口dispatch接口,初始化的时候action的值是config空,本文只写了上传图片当action的值是uploadimage上传图片

    
    import cn.thinkjoy.springboot.business.response.HttpResponse;
    import cn.thinkjoy.springboot.homework.utils.ResultUtil;
    import cn.thinkjoy.springboot.utils.CodeProduceUtil;
    import cn.thinkjoy.springboot.utils.UploadUtIl;
    import com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONObject;
    import com.baidu.ueditor.define.AppInfo;
    import com.baidu.ueditor.define.BaseState;
    import io.swagger.annotations.Api;
    import io.swagger.annotations.ApiImplicitParam;
    import io.swagger.annotations.ApiOperation;
    import org.apache.commons.io.FilenameUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartException;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    import org.springframework.web.multipart.commons.CommonsMultipartResolver;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.*;
    import java.util.Iterator;
    
    
    /**
     * 〈功能简述〉<br>
     * 〈〉
     *
     * @author leichunhong
     * @create 2020-11-09
     * @since 1.0.0
     */
    @RestController
    @RequestMapping("/upload")
    @Api(value = "文件上传", tags = "文件上传")
    public class Upload {
    
        @Value("${file.uploadFolder}")
        private String uploadFolder;
    
        @Value("${file.upload.nama}")
        private String reurl;
    
        
        @CrossOrigin
        @RequestMapping(value = "/dispatch", method = {RequestMethod.POST, RequestMethod.GET})
        public void config(HttpServletRequest request, HttpServletResponse response, String action) throws MultipartException {
            response.setContentType("application/json");
            String  path="";
            try {
                //获取config.json的地址读取
                if ("config".equals(action)) {    //如果是初始化
                    String file = "static/ueditor/config.json";
                    String exec = readFile(request, file);
                    response.setCharacterEncoding("UTF-8");
                    response.setContentType("application/javascript");
                    response.getWriter().write(exec);
                    response.getWriter().close();
                } else if ("uploadimage".equals(action)) {    //如果是上传图片、
    
                    //将当前上下文初始化给  CommonsMutipartResolver (多部分解析器)
                    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
                            request.getSession().getServletContext());
                    //检查form中是否有enctype="multipart/form-data"
                    if (multipartResolver.isMultipart(request)) {
                        //将request变成多部分request
                        MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
                        //获取multiRequest 中所有的文件名
                        Iterator iter = multiRequest.getFileNames();
    
                        while (iter.hasNext()) {
                            //一次遍历所有文件
                            MultipartFile multipartFile = multiRequest.getFile(iter.next().toString());
                            if (multipartFile != null) {
                                // 项目在容器中实际发布运行的根路径
                                String realPath = uploadFolder;
                                // 自定义的文件名称
                                String trueFileName = CodeProduceUtil.getCode() + "." + FilenameUtils.getExtension(multipartFile.getOriginalFilename());
                                // 设置存放图片文件的路径
                                path = realPath + trueFileName;
                                File file = new File(path);
                                multipartFile.transferTo(file);
                                path = reurl + "/upload/" + trueFileName;
    
                                //组装百度上传图片返回连接
                                JSONObject jsonobject = new JSONObject();
                                jsonobject.put("state", "SUCCESS");
                                jsonobject.put("original", multipartFile.getName());
                                jsonobject.put("size", multipartFile.getSize());
                                jsonobject.put("title", "图片");
                                jsonobject.put("type", FilenameUtils.getExtension(multipartFile.getOriginalFilename()));
                                jsonobject.put("url", path);
                                response.setHeader("Access-Control-Allow-Origin", "*");//设置该图片允许跨域访问
                                response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With");//设置允许的跨域header
                                response.setContentType("application/json;charset=utf-8");
                                response.getWriter().write(jsonobject.toString());
                                response.getWriter().close();
                            }
                        }
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
            }
        }
    
    
    
        private String readFile(HttpServletRequest request, String file) throws IOException {
    
            StringBuilder builder = new StringBuilder();
    
            try {
                InputStream inputStream = ClassLoader.getSystemResourceAsStream(file);
                InputStreamReader reader = new InputStreamReader(inputStream, "UTF-8");
                BufferedReader bfReader = new BufferedReader(reader);
    
                String tmpContent = null;
    
                while ((tmpContent = bfReader.readLine()) != null) {
                    builder.append(tmpContent);
                }
    
                bfReader.close();
    
            } catch (UnsupportedEncodingException e) {
                // 忽略
            }
    
            JSONObject jSONObject = filter(builder.toString());
            String result = jSONObject.toJSONString();
            String callbackName = request.getParameter("callback");
    
            if (callbackName != null) {
    
                if (!validCallbackName(callbackName)) {
                    return new BaseState(false, AppInfo.ILLEGAL).toJSONString();
                }
    
                return callbackName + "(" + result + ");";
    
            } else {
                return result;
            }
        }
    
    
        // 过滤输入字符串, 剔除多行注释以及替换掉反斜杠
        private JSONObject filter(String input) {
            JSONObject jSONObject = JSON.parseObject(input.replaceAll("/\\*[\\s\\S]*?\\*/", ""));
            return jSONObject;
        }
    
        /**
         * callback参数验证
         */
        public boolean validCallbackName(String name) {
            if (name.matches("^[a-zA-Z_]+[\\w0-9_]*$")) {
                return true;
            }
            return false;
        }
    
    
    }
    

    3.上传图片的路径和域名配置,图片上传到后端项目的data/file目录下,file.upload.nama是后端项目域名

    file.uploadFolder=/data/file/
    
    #上传文件本地域名
    file.upload.nama=http://www.xxx.com

     

    展开全文
  • node.js koa2 百度富文本编辑器源代码及使用详细教程。 node.js koa2 百度富文本编辑器源代码及使用详细教程。 node.js koa2 百度富文本编辑器源代码及使用详细教程。
  • 百度UMeditor富文本编辑器java使用1.介绍UMeditor 是一款轻量级的富文本编辑器,比UEditor要小得多,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器2.下载官网地址:...
  • 富文本编辑器的整合是一件十分简单的事情,在遇到困难时,不妨看看editor文件夹中的官方演示文件,可以让我们知道某些过程是如何实现的以及通过最简练的代码完成前后端的设计 (在文件的examples文件夹中有着许多...
  • 接下来就是在后台嵌入富文本编辑器了,打开blog的admin.py,修改如下: from .models import Article #引入Article模型 class ArticleAdmin(admin.ModelAdmin): list_display = ('title','pub_date','update_time',)...
  • Vue中部署百度富文本编辑器UEditor及其自带的后端,并加入秀米插件导语部署UEditor前端部分 导语 本文使用vue-ueditor-wrap插件将UEditor编辑器嵌入Vue中,实践过程中颇多曲折,以下错误和解决方案都是个人摸索的...
  • 不得不吐槽一下这个巨坑。既然踩过一次,那就记录下来。废话不多说直接说如何做吧1.在官网下载你需要的版本ueditorQQ截图...后端源码,前端代码。4.配置后台。直接将后台代码下载下来。添加到我们自己的项...
  • 目录admin后台使用富文本编辑器 CKEditor实现的效果CKEditor的安装在setting.py中的下面几个配置关于CKEditor的路由使用前端如何使用 admin后台使用富文本编辑器 CKEditor 实现的效果 CKEditor的安装 pip install ...
  • 我在官网上下载了个hueditor1_4_3_3 JSP版本的富文本编辑器,结果显示报错: 后端配置项没有正常加载,上传插件不能正常使用!后来上网查是上传路径没配置,然后我再config.json文件下找到...
  • java 富文本编辑器demo

    热门讨论 2014-07-21 17:13:35
    富文本编辑器demo,java 实现,可把数据存入数据库,在jsp中修改数据库配置
  • 注意,这里的图片上传配置,仅能保证图片管理的上传下载正常,而单张照片上传,后端显示成功,也接收到文件了,可是前端会报错,笔者没有找到解决方案,所以注释掉了单张照片上传的功能,以后有时间再研究。1.后端...
  • 做了一个简易在线的富文本编辑器,前端是html,后台是Java 前端代码: <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <title></title> <meta ...
  • 前端富文本编译器使用总结: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery… ...
  • 文章目录一、全局引入第一步,安装第二部,引入VueTs 一、全局引入 第一步,安装 npm install --save “@tinymce/tinymce-vue@^4” 第二部,引入 Vue <template> <div>this createBlog<...script&
  • 二、访问UEditor富文本编辑器以下这个文件 /ueditor/php/controller.php 是否返回以下 三、再次访问UEditor富文本编辑器 /ueditor/php/controller.php?action=config 返回以下错误 出现在以上三个问题,可以确认...
  • 富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. CSDN的markdown编辑器便是一种富文本编辑器.  蓝莓商城商品详情这一部分的编辑需要使用富文本编辑器.本来想使用...
  • 在VueJs中集成UEditor 富文本编辑器

    千次阅读 2020-11-06 21:36:34
    来源 |http://www.mshady.com/archives/378在vue的项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多...
  • 项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 ...
  • CKEditor富文本编辑器

    2021-08-09 02:58:38
    富文本编辑器在电商后台里又是非常常见的一个功能。自从前后端分离成为web项目主流,三大框架崛起,jquey成为过去式,jsp等项目逐渐被淘汰,一些优秀的“轮子”也停止了维护旧的“轮子”已经停止了维护,却没有新...
  • 第一次压测 惨不忍睹,平均响应时间150ms,而且在这次压测过程中还发现其它的问题,后台报错,经查是OpenSearch每秒查询次数限制 优化代码与配置 1、修改OpenSearch配置,并且将压测环境中的OpenSearch连接地址改为...
  • 这个Tinymce富文本编辑器是vue-element-admin内集成好的,使用过后体验非常不错,很简单易用。这里分享一下,同时又看到了网上帖子都没什么人写前后端同时展示的,很多人想知道编辑器编辑的文章格式展示在前端的。...
  • 关于异步获取数据,富文本编辑器无法显示1.解决方案:一定要在使用到wangEditor的组件中进行网络请求。原因,mounted()生命周期中,虽然可以操作data中的变量,但是不可以进行赋值操作解决办法,将wangEditor的实例...
  • WangEditor上传图片到java后端 新建Maven工程 1.pom.xml <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.11<...
  • 以上可实现简单的富文本编辑器 如下图: 接下来实现图片上传功能 点击图片上传后效果直接调用本地文件 当this.editor.config.showLinkImg = false时上图效果 当this.editor.config.showLinkImg = true或不
  • 这里下载任意一个版本的都可以,因为我们只需要把关于ueEditor前端部分的抽取出来,至于后端服务器的,我们自己开发实现。 其实,uEditord的绝大部分功能在django中都是可用的,只有上传文件、图片、视

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,582
精华内容 2,632
关键字:

富文本编辑器后端