VUE中引入UEditor富文本编辑器

最新推荐文章于 2024-08-02 13:58:17 发布

人间草木96

最新推荐文章于 2024-08-02 13:58:17 发布

阅读量4.1k

点赞数 4

分类专栏：个人总结 vue

本文链接：https://blog.csdn.net/qq_43258252/article/details/86677903

版权

本文介绍了如何在Vue项目中集成UEditor富文本编辑器。首先将UEditor资源放入src/static，然后封装为ueditor.vue组件，最后在需要的地方引用此组件。

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

vue中引入ueditor

1.放入静态资源并配置

首先把官网下载的Ueditor资源，放入静态资源src/static中。(你的U盘里有，不用下载了)

2.封装一个组件 ueditor.vue ，放到src/components/里

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

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

export default {
  props: {
    initData: {
      type: String
    }
  },

  data () {
    return {
      editor: null
    }
  },

  watch: {
    initData: function (val) {
      let con = val ? val : ''
      this.editor.ready(() => {
        this.editor.setContent(con)
      })
    }
  },

  mounted () {
    this.setConfig()
  },

  methods: {
    // 获取内容