vue2 elementui 引入 tinymce

在Vue2中使用Element UI引入Tinymce，首先需要在项目中安装Element UI和Tinymce，并引入相应的依赖。

1. 安装Element UI和Tinymce：

在项目的根目录下执行以下命令来安装Element UI和Tinymce依赖：

npm install element-ui tinymce --save

2. 引入Element UI和Tinymce：

在项目的入口文件中（比如main.js），引入Element UI和Tinymce的样式和组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import tinymce from 'tinymce'
import 'tinymce/themes/silver'
import 'tinymce/plugins/image'
import 'tinymce/plugins/code'

Vue.use(ElementUI)
Vue.prototype.$tinymce = tinymce

这里假设你使用了默认主题（silver），并引入了image和code两个插件。你也可以根据需要引入其他插件。

3. 在页面中使用Tinymce：

在你需要使用Tinymce的组件中，可以通过v-model绑定一个数据来实现双向绑定。在mounted钩子函数中初始化Tinymce编辑器。

<template>
  <div>
    <tinymce v-model="content"></tinymce>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initEditor()
    })
  },
  methods: {
    initEditor() {
      const editor = this.$tinymce.get('tinymce')
      if (editor) {
        this.$tinymce.remove(editor)
      }
      this.$tinymce.init({
        selector: 'tinymce',
        plugins: ['image', 'code'],
        toolbar: 'undo redo | bold italic | image code',
        setup: (editor) => {
          editor.on('change', () => {
            this.content = editor.getContent()
          })
        }
      })
    }
  }
}
</script>

在mounted钩子函数中，我们调用initEditor方法来初始化Tinymce编辑器。通过this.$tinymce.get('tinymce')来获取编辑器实例，若实例存在则移除；然后调用this.$tinymce.init来初始化编辑器配置。我们在这个配置中设置选择器为'tinymce'，即我们模板中的元素。此外，我们还可以定义各种插件、工具栏等等。

最后，我们通过监听编辑器的change事件来更新绑定的数据content。

通过以上步骤，我们就可以在Vue2中使用Element UI引入Tinymce了。希望这能帮到你。