vue中集成Ueditor富文本编辑器

最新推荐文章于 2025-07-28 15:08:52 发布

lily_zhouou

最新推荐文章于 2025-07-28 15:08:52 发布

阅读量926

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue ueditor UE

本文链接：https://blog.youkuaiyun.com/qq_41595903/article/details/89214982

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在Vue项目中集成Ueditor富文本编辑器。首先，从官网下载资源并放入static目录；接着，调整ueditor.config.js的配置；然后，通过在main.js或index.html引入编辑器；最后，在components创建组件并引用，实现编辑器的功能。

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

从官网下载ueditor资源，解压放在static目录
修改ueditor.config.js中的配置
将编辑器集成到系统中，src/main.js

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

或者index.html
在这里插入图片描述

新建一个组件，放在components目录

mian.vue

<template>
  <div>
    <script :id="randomId" type="text/plain"></script>
  </div>
</template>

<script>
  import { api } from '~/ui-domain'

  export default {
    name: 'UE',
    data() {
      return {
        /** 编辑器实例 */
        editor: null,

        /** 每个编辑器生成不同的id,以防止冲突 */
        randomId: 'editor_1' + parseInt(Math.random() * 10000 + 1),

        ready: false
      }
    },
    props: {
      defaultMsg: {
        type: String,
        default: ''
      },
      config: {
        type: Object,
        default: () => ({
          serverUrl: `${api.base}/ueditor/`
        })
      }
    },
    watch: {
      defaultMsg(newVal, oldVal) {
        if (newVal != null && this.ready) {
          this.editor.setContent(newVal || '')
        }
      }
    },
    mounted() {
      this.initEditor()
    },
    methods: {
      /** 初始化编辑器 */
      initEditor() {
        this.$nextTick(() => {
          this.editor = window.UE.getEditor(this.randomId, this.config)
          this.editor.addListener('ready', () => {
            this.ready = true
            this.editor.setContent(this.defaultMsg)
          })
        })
      },

      getUEContent() {
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy()
    }
  }
</script>

index.js

/**
 * 百度UE
 */
import Vue from 'vue'
import UE from './src/main'

UE.install = () => {
  Vue.component(UE.name, UE)
}

export default UE

在组件中引用

<template>
  <div>
    <UE ref="UE" :defaultMsg="defaultMsg"></UE>
  </div>
</template>

<script>
  import { UE } from '@/components'
  export default {
    name: "index",
    data () {
      return {
        defaultMsg: ''
      }
    },
    methods: {
      //获取编辑器内容
      getMsg () {
        let msg = this.$refs['UE'].getUEContent();
        console.log(msg);
      }
    }
  }
</script>

<style scoped>

</style>

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