vue2 tinymce基本使用,图片上传,添加插件

好的，下面是关于 Vue2 Tinymce 的基本使用、图片上传和添加插件的步骤：

1. 安装 tinymce 和 vue-tinymce 插件：

npm install tinymce vue-tinymce --save

2. 在 main.js 中引入 tinymce：

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/code'
import 'tinymce/plugins/link'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'

3. 在组件中引入 vue-tinymce：

import { VueEditor } from 'vue2-tinymce'

4. 在组件的模板中使用 vue-tinymce：

<template>
  <div>
    <vue-editor v-model="content" :init="initSettings"></vue-editor>
  </div>
</template>

5. 定义初始化设置：

data() {
  return {
    content: '',
    initSettings: {
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
      ],
      toolbar:
        'undo redo | formatselect | bold italic backcolor | \
        alignleft aligncenter alignright alignjustify | \
        bullist numlist outdent indent | removeformat | help',
      images_upload_url: '/api/upload/image',
      images_upload_handler: (blobInfo, success, failure) => {
        let xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/api/upload/image');

        xhr.onload = function() {
          let json;

          if (xhr.status !== 200) {
            failure('HTTP Error: ' + xhr.status);
            return;
          }

          json = JSON.parse(xhr.responseText);

          if (!json || typeof json.location != 'string') {
            failure('Invalid JSON: ' + xhr.responseText);
            return;
          }

          success(json.location);
        };

        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());

        xhr.send(formData);
      }
    }
  }
}

其中，`plugins` 定义插件列表，`toolbar` 定义工具栏，`images_upload_url` 定义图片上传路径，`images_upload_handler` 定义图片上传的处理函数。

6. 添加需要的插件，例如 image、code、link、table 和 lists 等。

以上就是 Vue2 Tinymce 的基本使用、图片上传和添加插件的步骤。