vue-ueditor-wrap安装、封装及使用

baizeyv

已于 2022-07-22 16:47:39 修改

阅读量2.6k

点赞数 1

分类专栏：富文本编辑器文章标签： vue.js 前端 javascript java intellij-idea

于 2022-07-22 15:56:36 首次发布

本文链接：https://blog.csdn.net/baizeyv/article/details/125934141

版权

本文详细介绍了如何在Vue项目中安装、封装和使用vue-ueditor-wrap，包括下载处理过的UEditor，设置上传接口，封装UE子组件，并解决可能出现的视频和header问题。确保上传接口返回特定参数，配置文件中的访问路径正确。同时，提供了针对视频不可编辑和header传递问题的解决方案。

摘要由CSDN通过智能技术生成

vue-ueditor-wrap安装、封装及使用

安装 vue ueditor

npm install vue-ueditor-wrap

下载已处理的 UEditor

进入此链接下载对应版本

该文章以 jsp 版本为例

将下载的压缩包解压后重命名为 UEditor ，放入 vue 项目的 public 文件夹中，如下图所示：
在这里插入图片描述

将 jsp/config.json 中的内容放入 ueditor.config.js ，放在 toolbars 之后即可：
在这里插入图片描述

修改配置中的上传文件的名称以及 action

此处上传文件名称即为 发起请求是传文件参的参数名称，一定要与上传接口对应上！

action 即 url 后缀的 /?action=uploadimage 此样式

同时也要注意配置文件中的 访问路径前缀

上传接口注意事项

UEditor 要求上传接口返回的参数中包含 state , url , title , original

当返回的 state 为 SUCCESS 时，即为上传成功，表示上传的状态

url 表示该文件真实的 url 地址

title 代表该文件在标签中的 title 字段

original 代表该文件在标签中的 alt 字段

Controller 例子：

其中包含了自己项目中的内容，这仅仅是一个展示返回字段的例子

@PostMapping("/uploadTest")  
public String uploadFileTest(MultipartFile file) throws Exception {
     
    try {
     
        // 上传文件路径  
        String filePath = NiuaConfig.getUploadPath();  
        // 上传并返回新文件名称  
        String fileName = FileUploadUtils.upload(filePath, file);  
        String url = serverConfig.getUrl() + fileName;  
        redisTemplate.opsForValue().set("uploadUrl", url);  
        ObjectMapper mp = new ObjectMapper();  
        UEResJson neo = new UEResJson();  
        neo.setState("SUCCESS");  
        neo.setUrl(url); // url  
        neo.setTitle(fileName); // title  
        neo.setOriginal(fileName); // alt  
  
        String str = mp.writeValueAsString(neo);  
  
        return str;  
    } catch (Exception e) {
     
        return "";  
    }  
}

该实体类中，除此之外，也可选 type , size 字段

import lombok.Data;  
  
import java.io.Serializable;  
  
@Data  
public class UEResJson implements Serializable {
     
  
    private String state;  
  
    private String url;  
  
    private String title;  
  
    private String original;  
  
}

封装 UE 子组件

在 components 文件夹中新建 UEditor 文件夹，并在其中创建 UE.vue 文件
在这里插入图片描述

UE.vue 内容如下：

注意 config 中的 UEDITOR_HOME_URL 以及 serverUrl

UEDITOR_HOME_URL 即下载的配置文件的路径

serverUrl 即上传模块的通用接口

<template>  
    <div>  
        <VueUeditorWrap  v-model="content" :config="config"></VueUeditorWrap>  
        <el-button typeof="primary" @click="showContent()">Get UE Content</el-button>