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

富文本编辑器

一、vue与UEditor集成

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

1.前端实现

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

大型项目技术栈第五讲 富文本编辑器_第1张图片

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

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


引入其他UEditor的js


		
		

1.3.注册组件

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

components: {
  VueUeditorWrap
}

1.4.v-model绑定数据

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


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

大型项目技术栈第五讲 富文本编辑器_第2张图片

参考示例:

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: '

Vue + UEditor + v-model双向绑定

' } });

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

大型项目技术栈第五讲 富文本编辑器_第3张图片

1.5 获取编辑器对象


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

2.后台实现

2.1 复制文件

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

大型项目技术栈第五讲 富文本编辑器_第4张图片

大型项目技术栈第五讲 富文本编辑器_第5张图片

2.2 导入依赖包

 
            com.baidu
            ueditor
            1.1.2
        
        
            org.json
            json
            20170516
        

        
            commons-fileupload
            commons-fileupload
            1.3.3
        
        
            commons-io
            commons-io
            2.4
        
        
            commons-codec
            commons-codec
            1.9
        
        
            javax.servlet
            javax.servlet-api
            3.1.0
        

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

idea打开控制台

大型项目技术栈第五讲 富文本编辑器_第6张图片

通过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的值来进行不同的处理,包括读取后台配置文件和各种上传操作

大型项目技术栈第五讲 富文本编辑器_第7张图片

请求配置url:

在这里插入图片描述

请求单图片上传url:

在这里插入图片描述

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

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

由于原逻辑是通过请求一个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 resultMap(String state, String original, long size, String title,String type,  String url){
        Map 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文件:

大型项目技术栈第五讲 富文本编辑器_第9张图片

之后在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;
    }

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

大型项目技术栈第五讲 富文本编辑器_第10张图片

controlle的统一接口

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

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

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

你可能感兴趣的:(大型项目技术栈汇总,vue,spring,js,java)