vue2如何安装tinymce

1. 安装 tinymce-vue

npm install tinymce-vue

2. 在需要使用的组件中引入 tinymce-vue

<template>
  <div>
    <tinymce-vue v-model="content" :init="editorConfig"></tinymce-vue>
  </div>
</template>

<script>
import tinymceVue from 'tinymce-vue';

export default {
  components: {
    tinymceVue,
  },
  data() {
    return {
      content: '',
      editorConfig: {
        // 编辑器配置
      },
    };
  },
};
</script>

3. 在 main.js 中引入 tinymce

import Vue from 'vue';
import tinymce from 'tinymce';

Vue.prototype.$tinymce = tinymce;

4. 在 editorConfig 中配置需要的选项

editorConfig: {
  language: 'zh_CN',
  branding: false,
  plugins: 'image code link',
  toolbar: 'undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code',
  height: 300,
  width: 800,
  image_advtab: true,
  image_caption: true,
  image_title: true,
  image_description: true,
  image_dimensions: true,
  link_title: true,
  link_target: true,
  link_class_list: [
    { title: 'None', value: '' },
    { title: 'Button', value: 'btn btn-default' },
  ],
},

5. 在需要使用的组件中使用 tinymce

<template>
  <div>
    <textarea id="mytextarea"></textarea>
  </div>
</template>

<script>
import { createEditor } from '@/utils/tinymce';

export default {
  mounted() {
    createEditor('mytextarea', this.editorConfig);
  },
  data() {
    return {
      editorConfig: {
        // 编辑器配置
      },
    };
  },
};
</script>

6. 在 utils/tinymce.js 中创建 tinymce 编辑器

import tinymce from 'tinymce';

export function createEditor(id, config) {
  tinymce.init({
    selector: `#${id}`,
    ...config,
  });
}

7. 在 main.js 中引入 tinymce 的样式

import 'tinymce/skins/ui/oxide/skin.css';
import 'tinymce/skins/content/default/content.css';