【前后端的那些事】开源！快速上手富文本+富文本图片上传

已于 2024-01-14 12:55:44 修改
阅读量947 收藏 16
点赞数 13
分类专栏： 前后端的那些事 文章标签： vue springboot 富文本
于 2024-01-13 13:39:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62835094/article/details/135568987
版权

文章目录


前言：最近写项目，发现了一些很有意思的功能，想写文章，录视频把这些内容记录下。但这些功能太零碎，如果为每个功能都单独搭建一个项目，这明显不合适。于是我想，就搭建一个项目，把那些我想将的小功能全部整合到一起。实现 搭一次环境，处处使用。

本文主要实现一下两个功能

  1. 富文本
  2. 图片上传+下载

环境搭建
文章链接

已录制视频
视频链接

仓库地址
https://github.com/xuhuafeifei/fgbg-font-and-back.git

fullText富文本

使用wangEditor(vue3) + springboot实现富文本功能

效果图：
在这里插入图片描述

1. 后端接口

图片存储的逻辑：

  • 接收前端传递图片数据
  • 将图片下载到后端本地
  • 返回图片访问URL

图片下载的逻辑：

  • 提供下载文件的名字
  • 在后端服务器根据文件名寻找文件所在位置
  • 将文件以流数据形式导出，并通过HttpServletResponse返回

tip: 图片访问URL，本质上是访问下载文件接口URL

1.1 定义常量
/**
* 文件访问域名(请求下载的接口) 
* DOMAIN本质是访问图片下载接口
*/
private static final String DOMAIN = "http://localhost:9005/api_demo/fullText/file/download/";

/**
* 文件物理存储位置
*/
private static final String STORE_DIR = "E:\\B站视频创作\\前后端项目构建-小功能实现\\代码\\backend\\src\\main\\resources\\pict\\";
1.2 定义返回实体类
    static class Success {
        public final int errno;
        public final Object data;
        public Success(String url) {
            this.errno = 0;
            HashMap<String, String> map = new HashMap<>();
            map.put("url", url);
            this.data = map;
        }
    }

tip: 后端接口返回的图片需要按照一定的格式返回，具体可以参考文档[图片上传](菜单配置 | wangEditor)

  • 上传成功
{
    "errno": 0, // 注意：值是数字，不能是字符串
    "data": {
        "url": "xxx", // 图片 src ，必须
        "alt": "yyy", // 图片描述文字，非必须
        "href": "zzz" // 图片的链接，非必须
    }
}
  • 上传失败
{
    "errno": 1, // 只要不等于 0 就行
    "message": "失败信息"
}
1.3 上传图片接口
    /**
     * 获取后缀
     */
    public static String getFileSuffix(String fileName) {
        // 检查文件名是否为null或空
        if (fileName == null || fileName.isEmpty()) {
            return "";
        }

        // 查找最后一个点（.）的位置
        int dotIndex = fileName.lastIndexOf('.');

        // 检查是否找到点，且不是在字符串开头
        if (dotIndex > 0) {
            // 从点开始截取，直到字符串末尾
            return fileName.substring(dotIndex);
        }

        // 如果没有找到点，或点在字符串开头，则返回空字符串
        return "";
    }

    /**
     * 上传文件接口
     * @param file
     * @return
     * @throws IOException
     */
    @RequestMapping("/file/upload")
    public Object uploadPict(@RequestParam("image") MultipartFile file) throws IOException {
        // 获取文件流
        InputStream is = file.getInputStream();
        // 获取文件真实名字
        String fileName = UUID.randomUUID().toString().substring(0, 10) + getFileSuffix(file.getOriginalFilename());
        // 在服务器中存储文件
        FileUtils.copyInputStreamToFile(is, new File(STORE_DIR + fileName));
        // 返回图片url
        String url = DOMAIN + fileName;
        return new Success(url);
    }
1.4 下载图片接口
    /**
     * 文件下载接口
     * @param fileName 文件名
     * @param request
     * @param response
     */
    @GetMapping("/file/download/{fileName}")
    public void download(@PathVariable("fileName") String fileName, HttpServletRequest request, HttpServletResponse response) {
        // 获取真实的文件路径
        String filePath = STORE_DIR + fileName;
        System.out.println("++++完整路径为："+filePath);

        try {
            // 下载文件
            // 设置响应头
            response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
            response.setHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + fileName);

            // 读取文件内容并写入输出流
            Files.copy(Paths.get(filePath), response.getOutputStream());
            response.getOutputStream().flush();
        } catch (IOException e) {
            response.setStatus(404);
        }
    }

2. 前端代码编写

2.1 安装
pnpm install @wangeditor/editor --save

pnpm install @wangeditor/editor-for-vue@next --save
2.2 快速使用

模板

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

script

使用setup语法糖

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IEditorConfig } from "@wangeditor/editor";
import { shallowRef, ref } from "vue";

// 初始化 MENU_CONF 属性
const editorConfig: Partial<IEditorConfig> = {
  MENU_CONF: {}
};
const mode = "default";

// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();

const handleCreated = editor => {
  console.log("created", editor);
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// 绑定数据
const valueHtml = ref("");

// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;

  editor.destroy();
});
</script>

3. 配置富文本图片上传地址

3.1 配置图片上传配置
<script>
// 配置上传地址
editorConfig.MENU_CONF["uploadImage"] = {
  // form-data fieldName ，默认值 'wangeditor-uploaded-image'
  fieldName: "image",
  server: baseUrlApi("fullText/file/upload"),
  // 小于该值就插入 base64 格式（而不上传），默认为 0
  base64LimitSize: 5 * 1024 // 5kb
};
</script>

tip: fieldName对应的是后端的文件上传接口：@RequestParam(“xxx”) MultipartFile中xxx的内容

4. 全部代码展示

  • 前端

    <script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IEditorConfig } from "@wangeditor/editor";
import { shallowRef, ref, onBeforeUnmount } from "vue";
import { baseUrlApi } from "@/api/utils";

// 初始化 MENU_CONF 属性
const editorConfig: Partial<IEditorConfig> = {
  MENU_CONF: {}
};
const mode = "default";

// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();

const handleCreated = editor => {
  console.log("created", editor);
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// 绑定数据
const valueHtml = ref("");

// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;

  editor.destroy();
});

// 配置上传地址
editorConfig.MENU_CONF["uploadImage"] = {
  // form-data fieldName ，默认值 'wangeditor-uploaded-image'
  fieldName: "image",
  server: baseUrlApi("fullText/file/upload"),
  // 小于该值就插入 base64 格式（而不上传），默认为 0
  base64LimitSize: 5 * 1024 // 5kb
};

const handleChange = editor => {
  // TS 语法
  console.log("content", editor.getHtml());
};
</script>

<template>
  <div style="border: 1px solid #ccc; margin-top: 10px">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<style lang="scss" scoped></style>

  • 后端

    @RequestMapping("/fullText")
@RestController
public class FullTextController {
    /**
     * 文件访问域名(请求下载的接口)
     */
    private static final String DOMAIN = "http://localhost:9005/api_demo/fullText/file/download/";

    /**
     * 文件物理存储位置
     */
    private static final String STORE_DIR = "E:\\B站视频创作\\前后端项目构建-小功能实现\\代码\\backend\\src\\main\\resources\\pict\\";

    static class Success {
        public final int errno;
        public final Object data;
        public Success(String url) {
            this.errno = 0;
            HashMap<String, String> map = new HashMap<>();
            map.put("url", url);
            this.data = map;
        }
    }

    /**
     * 获取后缀
     */
    public static String getFileSuffix(String fileName) {
        // 检查文件名是否为null或空
        if (fileName == null || fileName.isEmpty()) {
            return "";
        }

        // 查找最后一个点（.）的位置
        int dotIndex = fileName.lastIndexOf('.');

        // 检查是否找到点，且不是在字符串开头
        if (dotIndex > 0) {
            // 从点开始截取，直到字符串末尾
            return fileName.substring(dotIndex);
        }

        // 如果没有找到点，或点在字符串开头，则返回空字符串
        return "";
    }

    /**
     * 上传文件接口
     * @param file
     * @return
     * @throws IOException
     */
    @RequestMapping("/file/upload")
    public Object uploadPict(@RequestParam("image") MultipartFile file) throws IOException {
        // 获取文件流
        InputStream is = file.getInputStream();
        // 获取文件真实名字
        String fileName = UUID.randomUUID().toString().substring(0, 10) + getFileSuffix(file.getOriginalFilename());
        // 在服务器中存储文件
        FileUtils.copyInputStreamToFile(is, new File(STORE_DIR + fileName));
        // 返回图片url
        String url = DOMAIN + fileName;
        return new Success(url);
    }

    /**
     * 文件下载接口
     * @param fileName 文件名
     * @param request
     * @param response
     */
    @GetMapping("/file/download/{fileName}")
    public void download(@PathVariable("fileName") String fileName, HttpServletRequest request, HttpServletResponse response) {
        // 获取真实的文件路径
        String filePath = STORE_DIR + fileName;
        System.out.println("++++完整路径为："+filePath);

        try {
            // 下载文件
            // 设置响应头
            response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
            response.setHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + fileName);

            // 读取文件内容并写入输出流
            Files.copy(Paths.get(filePath), response.getOutputStream());
            response.getOutputStream().flush();
        } catch (IOException e) {
            response.setStatus(404);
        }
    }
}
飞哥不鸽
关注
  • 13
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义
2401_84097798的博客
04-07 424
/ 比如我要调用’http://0.0:300/user/add’，直接写‘/api/user/add’即可 代理后地址栏显示/serverUrl: ‘/manager/common/imgUpload’, // 这里写你要上传的图片服务器地址。‘^/api’: ‘/’ //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替。target: ‘http://localhost:18080/’, //设置调用接口域名和端口号别忘了加http。// 富文本图片上传前。
django轻松使用富文本编辑器CKEditor的方法
12-24
遗憾的是，django并没有提供官方的富文本编辑器，而后者恰好是内容型网站后台管理中不可或缺的控件。ckeditor是一款基于javascript，使用非常广泛的开源网页编辑器。它可以和多种编程语言相结合，python当然也不例外...
wangEditor(富文本编辑器，含图片上传功能) vue2
m0_54421294的博客
10-05 2453
富文本编辑器，Vue2
富文本框编辑器 图片粘贴上传，实现图文粘贴，图片自动上传
Mr_Zang666的博客
08-03 970
1.获取光标代码部分，大部分都是直接利用TheViper的代码，只是做了简单的修改，在获取光标的位置添加了插件子集document对象，因为直接使用document对象获取不到光标位置。经过这些处理基本上实现了一个完整的Word图片上传插件（WordPaster），能够自动上传剪切板中的图片，能够自动上传Word中的所有图片。
Vue3使用vue-quill富文本编辑器并实现图片自定义上传替换默认base64格式图片
最新发布
Me_Rui的博客
04-30 788
本文介绍在vue3环境下使用vue-quill富文本编辑器，并实现使用自定义上传接口将图片上传至服务器并保存为img标签src为服务器中图片的地址而不是默认的base64格式图片。从而解决富文本编辑器使用base64导致字段超长问题。
wangEditor富文本编辑器（第三章：图片上传）
DW14687的博客
06-15 9345
目录前言一、思路？1.修改上传方式二、全部流程总结接上一章字数限制做好后，这一章要解决一下图片上传得问题，官方中得图片是转成了base格式，但是现实情况下就是要调用后端接口上传照片，所以我们这章主要是修改图片上传得默认接口~。默认是有上传图片的，并且是两个选项，如下： 这里我们只需要一个上传图片，所以要先隐藏这个下拉，点击图片菜单后直接弹出图片选择，如下： 如何做呢？在editor.create()之前写下面这句： 二、全部流程 注释很详细了，代码如下： 总结 以上就是今天要讲的内容，本文
vue项目 vue-quill-editor富文本编辑器+图片上传
余白x的博客
08-16 2473
serverUrl
9款 Vue 富文本编辑器
学习 记录 总结 分享
05-10 1万+
Trumbowyg 是一个轻量，可定制的 jQuery 所见即所得（WYSIWYG）的编辑器插件，可生成语义化代码，带有功能强大的 API。编辑器和生成的代码进行了优化以支持 HTML5。兼容大部分浏览器，如 IE8+、Chrome、Opera 和 Firefox。基于bootstrap,比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。
富文本编辑器文件上传
夜轻狂的博客
06-07 706
2.安装完成后，在src下的component文件夹中创建quill.vue,简单点将下面的代码复制进去，封装好的组件，其中把服务器地址和headers两个位置替换，然后在uploadFile方法中把接口替换。3.在需要的组件中引入，使用。1.需要先将其安装到您的。
富文本编辑器实现一键上传word图片
weixin_45525177的博客
02-13 622
if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) { //判断浏览器内核是否为Trident内核IE8.0。// 当数据包大小不是数据单元的整数倍时，读取最后剩余的小于数据单元的所有数据。// 忽略简单form字段而不是上传域的文件域(等)然后访问http://localhost:8088/ueditor/ 就可以测试了。
基于SpringBoot3.x+Mybatis-Plus开发的通用后台管理系统源代码+数据库，简单易用，快速上手
06-19
我也想做一个适用于大部分场景的快速开发框架，所以，沿用My系列的MyAdmin便诞生了 框架基于SpringBoot3.x...通知公告：富文本编辑器 功能测试：测试邮件发送、短信发送、钉钉发送 表单构建：拖拽完成页面导出vue文件
KindEditor富文本框图片上传
07-03
KindEditor富文本框图片上传 文件上传 json-simple-1.1.1.jar 和 kindeditor.zip
VueAdmin:vue + element后台管理系统模板
03-11
富文本编辑器 markdown编辑器 图片拖拽上传 列表拖拽排序 权限测试 404/403 三级菜单 可拖拽弹窗 国际化 Excel表导出 pdf格式 导出zip PWA 安装步骤 https://github.com/MRXKing/VueAdmin.git // 把模板下载到...
百度地图开发java源码-MCMS_MyDocs:铭飞MCMS的入手使用教程（自用，也非常欢迎PR）
06-06
这里只讲基本功能，以求能够快速上手，细节上的(如编号、属性、内容/封面地址之类的)请仔细查看管理界面 默认管理界面为 帐号密码都是 msopen 默认主页 1.1.1. 内容管理 主页：网站主页，我们可以在主页导航栏上放...
JavaWeb后台开发框架-其他
06-12
同时，框架提供长大量常规组件，如上传单图、上传多图、上传文件、下拉选择、复选框按钮、单选按钮，城市选择、富文本编辑器、权限颗粒度控制等高频使用的组件，代码简介，使用方便，节省了大量重复性的劳动，降低...
富文本编辑器——UEditor的使用——基础积累
yehaocheng520的博客
10-25 1万+
富文本编辑器——UEditor的使用——基础积累
若依框架富文本增加图片上传及移动和放大缩小
m0_61084021的博客
11-02 1208
若依框架使用时quill富文本插件，但是没办法更改上传图片的大小尺寸，需要下载第三方插件。1.在vue.config.js中增加。3.在页面中引入插件。4.在页面代码中添加。
几大开源免费的 JavaScript 富文本编辑器测评
热门推荐
玖涯博客
03-09 2万+
MarkDown 编辑器用的时间长了，发现发现富文本编辑器用起来是真的舒服。
vue quill富文本编辑器上传图片遇到的坑
dawang18232123的博客
02-13 1071
在使用quill富文本编辑器上传图片的时候，很多地方都是成功的，但是唯有一处，上传图片总是失败，由此后端的朋友就说可以html标签转换成JSON字符串上传上去，展示的时候在转换回来，即可解决问题。由此，我保持怀疑的心态开始了尝试：首先就是引入html2json依赖。
vue npm 秀米
12-17
Vue 是一款流行的JavaScript 框架，用于构建用户界面。它采用了MVVM 模式，通过响应式的数据绑定和组件化的思想，使开发者能够更加高效地构建交互性的Web 应用。Vue 具有简洁的API 设计和渐进性的特性，使得初学者可以轻松上手，同时也能满足大型应用的需求。 npm 是Node.js 包管理工具，它允许开发者在项目中安装、管理和升级依赖的第三方模块。通过npm 可以快速获取到全球范围内的开源代码，使得开发过程更加高效。在使用Vue 开发项目时，我们可以通过npm 安装Vue 的核心模块、插件以及工具，以便于开发和调试。npm 还提供了一些有用的命令，比如查看依赖列表、安装指定版本的模块等。 秀米 是一款在线富文本编辑器，它提供了丰富的编辑功能和交互界面，让用户能够通过简单的操作创建漂亮的网页内容。秀米具有直观的界面和易上手的特点，不需要编写复杂的HTML 或CSS 代码，即可轻松实现定制化的页面设计。同时，秀米还支持多种网页导出格式，并提供了代码编辑模式，方便开发者进行更高级的定制。 综上所述，Vue、npm 和秀米分别代表了前端开发框架、包管理工具和在线富文本编辑器。它们都在不同的领域中发挥着重要的作用，为开发者提供了丰富的工具和资源，帮助我们更快速、高效地进行Web 开发。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值