SpringBoot+Vue使用ueditor(包含图片上传回显获取内容)

最新推荐文章于 2025-02-14 14:47:07 发布

装14

最新推荐文章于 2025-02-14 14:47:07 发布

阅读量2.4k

点赞数 3

分类专栏：日常笔记文章标签： vue.js spring boot javascript

本文链接：https://blog.youkuaiyun.com/zhuang15/article/details/120202205

版权

本文介绍了如何在SpringBoot项目中集成Vue，并使用ueditor编辑器。详细步骤包括下载ueditor，前端Vue组件的创建和配置，后端接口的设置，特别是图片上传和回显的实现。遇到的跨域问题和解决办法也进行了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SpringBoot+Vue使用ueditor

前言

最近公司突然要给项目换个编辑器, 说是要换成百度的ueditor, 让我研究一下, 咱也不会只能硬着头皮来研究一下; 一通百度下来感觉更

懵了, 这ueditor16年百度就停止更新了, 不知道为啥还要用这玩意; 不过经过我2天多的摸索(遇到了不少的坑)终于成功了…废话不多说, 看

完你不会来砍我(说着玩的)

一. 下载准备

Ueditor文档地址: http://fex.baidu.com/ueditor/

GitHub地址: https://github.com/fex-team/ueditor

在这里插入图片描述

这里还是要说一下, 可能有些人会没注意到, dev表示的时开发环境, 我们不要下载这个, 里面没有jsp文件夹
在这里插入图片描述

这边咱们下载v1.4.3.3的版本, 解压之后将需要的文件拷贝到前端static文件目录下

在这里插入图片描述

这里我们发现官网下载UEditor文件没有ueditor.all.js、ueditor.all.min.js文件, 这边可以参考这篇博客点击, 需要注意如果安装失败需要使

用管理员的权限; 下载成功后就能得到我们需要的js文件了;

二. 前端Vue

2.1 创建vue组件

<template>
  <div class="editor-box">
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>

  import '../../../static/ueditor/ueditor.config.js'
  import '../../../static/ueditor/ueditor.all.min.js'
  import '../../../static/ueditor/lang/zh-cn/zh-cn.js'
  import '../../../static/ueditor/ueditor.parse.min.js'

  export default {
    name: 'UE',
    data() {
      return {
        editor: null
      }
    },
    props: {
      msg: {
        type: String
      },
      config: {
        type: Object,
      },
      id: {
        type: String
      }
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor('editor', this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.msg); // 确保UE加载完成后，放入内容。
      });
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent();
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>

注意: 这边需要注意的是导入的路径不能错误

2.2 使用组件

<template>
	<UE :msg=msg :config=config ref="UE" level="normal"></UE>
</template>
<script>
  import UE from '@/components/Ueditor'

  export default {
    name: "ue",
    components: {
      UE
    },
    data() {
      return {
        msg: '',
        config: {}
      }
    },
    methods: {
      //获取富文本值
      getUEMsg() {
        this.form.projectContent = this.$refs.UE.getUEContent();
      }
    }
  }