百度富文本Ueditor插件包及项目中使用(前后端代码)

ueditor

前端代码:

    //初始化的信息
    parent.window.isNo();
    var ue = UE.getEditor('editor',
        {
            toolbar: [
                [
                    'fullscreen', 'source', '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'directionalityltr', 'directionalityrtl', 'indent', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                    'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                    'simpleupload', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                    'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                    'print', 'preview', 'searchreplace', 'drafts', 'help'
                ]
            ]
        });
    //建议使用工厂方法getEditor创建和引用编辑器实例,
    //如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function (action) {
        // 这里很重要,很重要,很重要,要和配置中的imageActionName值一样
        if (action == 'uploadimage') {
            // 这里调用后端我们写的图片上传接口
            return '/uploadImageData';
        } else if (action == 'uploadfile') {
            return '/uploadFileData';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

application.yml中的配置
在这里插入图片描述

package com.system.controller;

import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.util.ClassUtils;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;


/**
 * 富文本转换器
 */
@Controller
public class ServerController {

	//图片保存服务器的存储路径
	@Value("${spring.servlet.multipart.location}")
	public  String SAVEPICPATH ;

	@RequestMapping("/config")
	@ResponseBody
	public String config(HttpServletRequest request, HttpServletResponse response){
		String json = "";
		response.setContentType("application/json");
		// 获取项目在磁盘的绝对路径
		//String path = ClassUtils.getDefaultClassLoader().getResource("").getPath();
		//String path = this.getClass().getResource("/").getPath();
		//System.out.println("path: " + path);
		InputStream is=this.getClass().getResourceAsStream( "/static/ueditor/jsp/config.json");
		BufferedReader br=new BufferedReader(new InputStreamReader(is));
		try {
			// 将josn文件读到Stirng
			json = IOUtils.toString(br);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return json;
	}

	@RequestMapping("/uploadImageData")
	@ResponseBody
	public Map<String, String> uploadImage(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request)
			throws IOException {
		// 文件原名称
		String fileName = upfile.getOriginalFilename();
		// 保存文件的新名字
		String nowName = UUID.randomUUID() + fileName.substring(upfile.getOriginalFilename().lastIndexOf("."));
		String uploadPath = "";

		File file = new File("");
		String filePath = file.getCanonicalPath();
		System.out.println(filePath);

		if (!upfile.isEmpty()) {
			String path = SAVEPICPATH;
			File f = new File(path);
			if (!f.exists()) {
				// 第一次上传文件新建文件夹
				f.mkdirs();
			}

			uploadPath = path + nowName;;
			// 按照路径新建文件
			File newFile = new File(uploadPath);
			if (!newFile.exists()) {
				newFile.createNewFile();
			}
			// 复制
			FileCopyUtils.copy(upfile.getBytes(), newFile);
		}
		// 返回结果信息(UEditor官方要求这个json格式)
		Map<String, String> map = new HashMap<String, String>();
		// 是否上传成功
		map.put("state", "SUCCESS");
		// 现在文件名称
		map.put("title", nowName);
		// 文件原名称
		map.put("original", fileName);
		// 文件类型 .+后缀名
		map.put("type", fileName.substring(upfile.getOriginalFilename().lastIndexOf(".")));
		// 文件路径
		 map.put("url", uploadPath); // 浏览器不能直接访问项目外目录的图片等文件,需要做虚拟路径映射
		String url= "/web/" + nowName;
		map.put("url", url); // 这个路径的 /PathImage/ 是在配置类里指定的映射到本地的绝对路径
		System.out.println("nowName=="+nowName);
		// 文件大小(字节数)
		map.put("size", upfile.getSize() + "");
//		String s = JSON.toJSONString(map);
		return map;
	}
}

ueditor插件中修改config.json
在这里插入图片描述
接下来就可以正常部署使用了!!!

最后奉上插件包链接:
ueditor插件包
链接:https://pan.baidu.com/s/1jhNqCTvlmllxoBw1NMJXgA
提取码:g521

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值