百度富文本 总结

百度富文本 使用总结：

java  vue+springboot+mybatis

开始不知道jsp文件里面的jar及相关文件为什么加载不到，后来直接不用jsp及下面的文件稍微改变配置文件的存放地址和参考其他同学加载配置，就解决了问题。

功能确实强大而且页面也比较不错，文档清晰简洁，但是使用上传图片功能的时候也是和各位同胞一样遇到了问题，感觉必须要做个记录了，也算自己留个文档，具体的配置步骤如下：

第一步：当然是下载百度富文本 插件：

下载后的

第二步：在自己的项目目录static下新建文件夹ueditor 将图片2 中除jsp文件夹外全部复制到项目下新建的ueditor文件下，将jsp中的配置文件复制到项目目录resources文件夹下，在工具包中新建ueditor工具包将以下第三张图片中的全部文件复制进去文件下载地址：https://download.csdn.net/download/zlnewcsdn/10762558 或者 链接：https://pan.baidu.com/s/1wsx3ApYoDGtj5cmRX58jRg 
提取码：14hq 

添加如下jar

<dependency>
            <groupId>com.github.qiuxiaoj</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.1.1</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20170516</version>
        </dependency>

第三步：把所有该应用到的文件准备完毕后--我们修改上传图片的服务器地址和访问地址

@RestController
@RequestMapping("/ueditor")
public class UeditorController extends AbstractController {
    @RequestMapping("/exec")
    public String exec(HttpServletRequest request)throws UnsupportedEncodingException {
        request.setCharacterEncoding("utf-8");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        return new ActionEnter( request, rootPath ).exec();
    }
//上传图片地址 及 返回
    @RequestMapping("/uploadimage")
    @ResponseBody
    public Map<String, Object> uploadNewsImg(MultipartFile upfile, HttpServletRequest request) {
        String path = Thread.currentThread().getContextClassLoader().getResource("").getPath() + "//static//upload//";
        File file = new File(path);
        if (!file.exists() && !file.isDirectory()) {
            file.mkdirs();
        }
        String oldName = upfile.getOriginalFilename();
        String hz = oldName.substring(oldName.lastIndexOf("."));
        UUID uuid = UUID.randomUUID();
        file = new File(path, uuid.toString() + hz);

        String fileName = uuid.toString() + hz;
        Map<String, Object> result = new HashMap<String,Object>();
        try {
            upfile.transferTo(file);
        } catch (IllegalStateException e) {
            logger.error("富文本编辑器图片上传失败，参数异常："+e);
        } catch (IOException e1) {
            logger.error("富文本编辑器图片上传失败io异常："+e1);
        }
        result.put("state", "SUCCESS");
        result.put("url",  fileName);
        result.put("original", "");
        result.put("type", hz);
        result.put("size", upfile.getSize());
        result.put("title", fileName);
        return result;
    }

}

当配置完服务器后，你可以访问下http://localhost:8089/XXXX/ueditor/exec?action=config 地址 XXXXX为你自己的项目名 会出现一大长流的字符串说明配置成功了，接下来就要配置上传图片保存的地址了

imagePathFormat上传的可以看以上代码部分 上传图片 及返回

imageUrlPrefix 图片访问路径前缀 一般为/项目名/upload/

js部分加载

 // /** 富文本 ***/
    window.UEDITOR_CONFIG.initialFrameWidth = 784;
    window.UEDITOR_CONFIG.initialFrameHeight = 300;
    UE.getEditor('editor');
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        console.log(action);
        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
            //XXXX项目名
            return 'http://localhost:8089/XXXX/ueditor/uploadimage';
        } else if (action == 'uploadvideo') {
            // return 'http://a.b.com/video.php';
            return null;
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

到此如果基本一样的话就可以实现图片上传保存，及回显的功能了

后期如有问题再补充

如有不足请多指教！