【vue】 vue2 中使用 Tinymce 富文本编辑器

在Vue 2项目中使用Tinymce富文本编辑器，首先需要安装Tinymce：

npm install tinymce

然后，你可以创建一个Vue组件以封装Tinymce：

<template>
  <div>
    <textarea :id="id"></textarea>
  </div>
</template>
 
<script>
import tinymce from 'tinymce';
 
export default {
  props: {
    id: {
      type: String,
      default: 'tinymce'
    },
    value: {
      type: String,
      default: ''
    }
  },
  mounted() {
    tinymce.init({
      selector: `#${this.id}`,
      plugins: 'lists link image code',
      toolbar: 'bullist numlist | link image | code',
      setup: (editor) => {
        editor.on('init Change', () => {
          editor.setContent(this.value);
        });
        editor.on('Change', () => {
          this.$emit('input', editor.getContent());
        });
      }
    });
  },
  destroyed() {
    tinymce.remove(`#${this.id}`);
  }
};
</script>

在父组件中使用该Tinymce组件：

<template>
  <div>
    <tinymce-editor v-model="content"></tinymce-editor>
  </div>
</template>
 
<script>
import TinymceEditor from './TinymceEditor.vue';
 
export default {
  components: {
    TinymceEditor
  },
  data() {
    return {
      content: ''
    };
  }
};
</script>

确保在Vue单文件组件中正确地引入并注册了Tinymce编辑器。以上代码提供了一个简单的例子，展示了如何在Vue 2项目中集成Tinymce编辑器。