富文本编辑器

一、vue与UEditor集成

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点

1.前端实现

1.1.下载最新编译的 UEditor并放入项目对应目录

大型项目技术栈第五讲 富文本编辑器_spring

将下载的文件夹命名成ueditor后复制到项目的webapp/static目录下

1.2.页面引入VueUeditorWrap组件，该组件是一个Vue + UEditor + v-model 双向绑定的vue组件

<script src="https://cdn.jsdelivr.net/npm/vue-ueditor-wrap@latest/lib/vue-ueditor-wrap.min.js"></script>

引入其他UEditor的js

<script src="static/ueditor/ueditor.config.js"></script>
		<script src="static/ueditor/ueditor.all.js"></script>
		<script type="text/javascript" charset="utf-8"  src="static/ueditor/lang/zh-cn/zh-cn.js"></script>

1.3.注册组件

在需要使用UEditor的页面，创建vue对象，并且设置components属性，components属性是用于引入组件的

components: {
  VueUeditorWrap
}

1.4.v-model绑定数据

在需要使用富文本编辑器的div中使用组件

<vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>

:config用于指定自定义UEditor配置，UEditor的公共配置文件是在 ueditor.config.js

大型项目技术栈第五讲 富文本编辑器_vue_02

参考示例：

var vm = new Vue({
        el:"#main-container",
        components:{
            VueUeditorWrap
        },
        data :{
            myConfig: {
                // 如果需要上传功能,找后端小伙伴要服务器接口地址
                // serverUrl: 'http://localhost:8090/ueditor/ueditorConfig',
                // 你的UEditor资源存放的路径  path是全局声明的应用路径 
                //'/static/ueditor/'是应用下存放ueditor文件位置注意最后一个"/"不能省略
                UEDITOR_HOME_URL: path+'/static/ueditor/' ,
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 工具栏是否可以浮动
                autoFloatEnabled: false,
                // 初始容器高度
                initialFrameHeight: 340,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 关闭自动保存
                enableAutoSave: true,
                // 上传文件接口（
      serverUrl: 'http://35.201.165.105:8000/controller.php'
            },
                msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>'
            }

    });

打开页面即可以看到编辑器

大型项目技术栈第五讲 富文本编辑器_java_03

1.5 获取编辑器对象

<vue-ueditor-wrap @ready="ready"></vue-ueditor-wrap>

methods:{
    ready:function(ueditorObj){
		console.log(`编辑器实例${ueditorObj.key}`,ueditorObj)
    }
}

2.后台实现

2.1 复制文件

解压Ueditor的源码，我们找到其中的这个jsp文件夹，将config.json复制到resources下，src里面的文件夹复制到src/main/java下

大型项目技术栈第五讲 富文本编辑器_大型项目技术栈汇总_04

大型项目技术栈第五讲 富文本编辑器_js_05

2.2 导入依赖包

 <dependency>
            <groupId>com.baidu</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20170516</version>
        </dependency>

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.9</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
        </dependency>

前面5个都是ueditor的依赖包，需要注意com.baidu.ueditor这个jar在中央仓库中没有办法找到，需要我们自己打包到本地仓库

idea打开控制台

大型项目技术栈第五讲 富文本编辑器_js_06

通过mvn命令将我们源码包中jsp文件夹下的lib中的ueditor.jar文件打包到本地仓库

mvn install:install-file -DgroupId=com.baidu -DartifactId=ueditor  -Dversion=1.1.2 -Dpackaging=jar -Dfile
=F:\IdeaProjects\guguanjia_day04\guguanjia\src\main\webapp\WEB-INF\lib\ueditor-1.1.2.jar

-DgroupId：与groupId对应

-DartifactId：与artifactId对应

-Dversion：版本

-Dfile：jar文件的存放路径

2.3 后台配置文件config.json

前端通过设置统一访问接口后，调用后台的统一接口，会根据请求参数中的action的值来进行不同的处理，包括读取后台配置文件和各种上传操作

大型项目技术栈第五讲 富文本编辑器_大型项目技术栈汇总_07

请求配置url：

大型项目技术栈第五讲 富文本编辑器_大型项目技术栈汇总_08

请求单图片上传url：

大型项目技术栈第五讲 富文本编辑器_js_09

这些请求都是由插件的ueditor.all.js中的事件控制自动发送ajax请求

后台读取到配置文件config.json中的配置就可以知道对应的请求和响应等地址信息
大型项目技术栈第五讲 富文本编辑器_spring_10

由于原逻辑是通过请求一个jsp文件来实现读取配置文件，我们需要修改成controller来实现

2.4 自定义controller实现统一接口

@Controller
@RequestMapping("/manager/ueditor")
public class UEditorController {

    @RequestMapping("config")//统一接口，需要与前端的serverUrl值一致
    @ResponseBody//前端是ajax请求，需要响应数据返回页面
    public String ueditorConfig(HttpServletRequest request, HttpServletResponse response,@RequestParam(name = "upfile",required = false) MultipartFile upfile) {

        response.setContentType("application/json;charset=utf8");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        String exec = "";
        try {

            String actionType = request.getParameter("action");
            //如果参数action的值是uploadimage，则是图片上传，该值uploadimage与配置文件config.json中的图片设置imageActionName属性一致  其他文件、视频上传也是根据该值判断
            if("uploadimage".equals(actionType) && !upfile.isEmpty()){
                // 做图片上传操作
                exec = uploadImage(upfile);

            }else{//请求配置信息则用默认的Controller.jsp的逻辑
                request.setCharacterEncoding( "utf-8" );
                exec = new ActionEnter(request, rootPath).exec();
            }

        } catch (IOException e) {
//            logger.error("UeditorController#ueditorConfig exception:",e);
        }
        return exec;
    }

    private String uploadImage(MultipartFile file) {
        JSONObject jsonResult = null;//由于图片上传需要返回指定的格式，用json返回
        try {
            String fileName = file.getOriginalFilename();
            String extraName = fileName.substring(fileName.lastIndexOf("."));
            // 这里就是上传图片的具体逻辑了，这里就简单生成个字符串假装上传成功了吧

            String str = UUID.randomUUID().toString();
            String url = "/upload"+str+".png ";
            jsonResult = new JSONObject(resultMap("SUCCESS",url,file.getSize(),fileName,fileName,extraName));

        } catch (Exception e) {
//            logger.warn("UeditorController#uploadImage exception:",e);
            jsonResult = new JSONObject(resultMap("文件上传失败","",0,"","",""));
        }
        return jsonResult.toString();
    }

    //{"state": "SUCCESS","original": "111.jpg","size": "124147","title": "1535961757878095151.jpg","type": ".jpg","url": "/1535961757878095151.jpg"}

    private Map<String,Object> resultMap(String state, String original, long size, String title,String type,  String url){
        Map<String ,Object> result = new HashMap<>();
        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;
    }

}

2.5 修改读取config.json逻辑

我们将配置文件复制到了资源目录下，所以接下来修改下获取配置文件的源码，找到ConfigManager文件：

大型项目技术栈第五讲 富文本编辑器_java_11

之后在156行左右找到：

String configContent = this.readFile( this.getConfigPath() );

修改为

String configJsonPath = null;
try {
    configJsonPath = this.getClass().getClassLoader().getResource("config.json").toURI().getPath();
} catch (URISyntaxException e) {
    e.printStackTrace();
}
String configContent = this.readFile( configJsonPath );

按上述一步步操作之后，后台关于获取上传配置文件以及提供上传图片功能就完成了

前端配置的serverurl就是Ueditor访问后台的路径了，将之配置正确之后，就可以测试上传图片功能了。

模拟上传成功后返回的图片路径

http://localhost:8080/guguanjia/upload/a8423c38-671f-4a70-a41f-194ef678ba17.png

2.4 文件上传

文件上传需要给springmvc配置视图解析器

 @Bean("multipartResolver")
    public CommonsMultipartResolver getMultipartResolver(){
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
        return multipartResolver;
    }

在配置文件和统一接口中，我们设置了上传封装的文件对象

大型项目技术栈第五讲 富文本编辑器_大型项目技术栈汇总_12

controlle的统一接口

@RequestMapping("config")
    @ResponseBody
    public String ueditorConfig(HttpServletRequest request, HttpServletResponse response,@RequestParam(name = "upfile",required = false) MultipartFile upfile) {
    。。。
    }

注意imageFieldName的值需要与MultipartFile 获取的请求参数名一致

其他步骤参考springmvc文件上传即可完成上传