TinyMCE富文本上传图片的垃圾清理方案

TinyMCE富文本编辑器

1, 什么是富文本编辑器?

​ 就是网页版的word

2,给项目中添加富文本编辑器

(1), 配置WebMvcConfig

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //配置静态资源请求路径和目录
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
	}
}

(2), 导包

<script th:src="@{/static/js/tinymce/tinymce.min.js}"></script>

(3),在网页里放置textarea文本域并设置id值

<textarea id="editor"></textarea>

(4),在脚本里编写如下代码即可

tinymce.init({
    selector: '#editor',
    language: 'zh_CN',
    content_style: "img {max-width:100%;}",
    plugins: 'bbcode code lists, advlist image imagetools autoresize table wordcount ',
    toolbar: 'formatselect forecolor backcolor bold italic | alignleft aligncenter alignright | bullist numlist | image table code',
    menubar: false,
    autosave_ask_before_unload: false,
    toolbar_drawer : false,
    convert_urls: false,
    paste_data_images: true,
    //文件异步上传请求路径, 返回格式为{ location : "/demo/image/1.jpg" }
    images_upload_url: '/demo/upimg.php'
});

3, 文件异步上传

(1), 配置硬盘文件请求路径和位置

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
	/**
	 * 文件存储路径
	 */
	@Value("${upload.path}")
	private String path;
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //配置静态资源请求路径和目录
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        //配置硬盘文件的请求路径
        registry.addResourceHandler("/upload/**").addResourceLocations("file:"+path);
	}
}

(2), 封装方法 - 根据相对路径和文件名获取服务器里文件的完整请求路径

/**
 * 获取文件在服务器中的请求路径
 * @param pathUrl 请求和相对路径, 例如 /upload/richtext/
 * @param fileName 文件名 例如 123.jpg
 * @return 返回格式为  http://ip:port/upload/richtext/123.jpg
 */
public String getServerUrl(String pathUrl, String fileName){
    StringBuffer url = request.getRequestURL();
    String uri = request.getRequestURI();
    String prefix = url.substring(0, url.indexOf(uri));
    return prefix+pathUrl+fileName;
}

(3), 编写文件异步上传代码

@PostMapping(value = "/richtext/fileUpload")
@ResponseBody
public Map<String, String> fileUpload(MultipartFile file){
    Map<String, String> map = new HashMap<>();
    //拼接新的存储路径 D:/upload/richtext
    String richtextPath = path + "richtext";
    if (file.isEmpty()) {
        map.put("msg", "文件上传失败");
    } else {
        // xxxx.png
        String fileName = FileUtils.upload(richtextPath, file);
        // http://ip:port/upload/richtext/xxx.jpg
        String fileUrl = getServerUrl("/upload/richtext/", fileName);
        map.put("location", fileUrl);
    }
    return map;
}

(4), 配置TinyMCE异步文件上传路径

images_upload_url: '/richtext/fileUpload'

4, 清理临时文件(垃圾文件)

(1), 先做一个List的工具列, 编写方法获得两个List的差集

public class ListUtil {
    /**
     * 获取list1相对于list2的差集
     * @param list1
     * @param list2
     * @return
     */
    public static List<String> diff(List<String> list1, List<String> list2){
        List<String> result = new ArrayList<>(list1);
        result.removeAll(list2);
        return result;
    }
}

(2), 创建TinyMCE的工具类,

• 编写方法获取富文本编辑器中图片名称的集合

• 编写方法获取指定路径下文件名称的集合

public class TinyMceUtil {
    /**
     * 根据富文本编辑器内容, 查找其中的文件名,封装到集合中
     * @param content [img]http://ip:port/upload/aaa/1.jpg[/img]...[img]http://ip:port/upload/aaa/2.jpg[/img]
     * @return [1.jpg, 2.jpg]
     */
    public static List<String> getFileNameList(String content){
        List<String> list = new ArrayList<>();
        int start = content.indexOf("[img]");
        if (start == -1) {
            return list;
        }
        while (start > -1) {
            int end = content.indexOf("[/img]");
            String str = content.substring(start+5, end);
            list.add(str.substring(str.lastIndexOf("/")+1));
            content = content.substring(end+6);
            start = content.indexOf("[img]");
        }
        return list;
    }
    /**
     * 根据指定的硬盘路径查询目录内所有文件,将文件名称封装到集合中
     * @param path 硬盘路径, 例如 D:/upload/richtext
     * @return
     */
    public static List<String> getDiskFileNameList(String path) {
        List<String> dfList = new ArrayList<>();
        File dir = new File(path);
        if (dir.exists()) {
            File[] files = dir.listFiles();
            for (File file : files) {
                if (file.isFile()) {
                    dfList.add(file.getName());
                }
            }
        }
        return dfList;
    }
}

(3), 完整方法如下:

private void cleanTempFile(){
    String richtextPath = path + "richtext";
    //获取硬盘中文件名的集合
    List<String> dfList = TinyMceUtil.getDiskFileNameList(richtextPath);
    //获取数据库中所有文件名字的集合
    List<String> dbList = new ArrayList<>();
    List<Richtext> list = richtextService.list();
    for (Richtext richtext : list) {
        dbList.addAll( TinyMceUtil.getFileNameList(richtext.getContent()) );
    }
    //做差集
    List<String> diffList = ListUtil.diff(dfList, dbList);
    //删除差集中的文件
    for (String fileName : diffList) {
        FileUtils.deleteFile( richtextPath , fileName);
    }
}

5, 定时器

(1), 创建定时器处理类

@Component
@EnableScheduling
public class MyScheduled {
    
}

(2), 注解@Scheduled详解

表达式	解释
“36 57 13 5 2 *”	每年2月5日 下午1点57分36秒
“0/5 * * * * *”	起始为0秒, 每个5秒执行一次
“* 6/5 * * * *”	每小时从第6分钟开始, 每个5分钟执行一次
“1-10 * * * * *”	每分钟,第1,2,3,4,5,6,7,8,9,10秒执行
“1-3,15-25 * * * * *”	每分钟,第1,2,3秒,第15到第25秒执行

(3),定时器写法

@Component
@EnableScheduling
public class MyScheduled {
    /**
     * 秒 分 时  日 月 周
     */
    @Scheduled(cron = "0 0 3 * * *")
    public void clean(){
        //执行的业务代码
    }
}