@keyblade/tinymce-editor-vue2

tinymce 富文本编辑器

一码游 tinymce 编辑器

前提

必须将 vue 版本升级至 2.7+，按如下文档操作，一般来说只需要升级 vue、及 @vue/cli-xxx 版本即可

升级指南：https://v2.cn.vuejs.org/v2/guide/migration-vue-2-7.html

一、安装

yarn add @keyblade/tinymce-editor-vue2
# 下面两个是编辑器需要的第三方依赖，如原项目中有，可以不用安装，但要注意版本，必须匹配，否则css样式有问题。

# 需要安装如下:
yarn add @keyblade/pro-components-vue2@1.13.1

二、使用

1.注入组件并设置全局属性（可选）

import TinymceEditor from '@keyblade/tinymce-editor-vue2'

import { ProVue2ImageUpload } from '@keyblade/pro-components-vue2'
import '@keyblade/pro-components-vue2/es/style.css'
Vue.use(ProVue2ImageUpload)

Vue.use(TinymceEditor, {
  // 图片
  imageUploadOptions: {
    action: '/api/man/uploadFile/uploadSingleFile',
    handlerResponse: (response: any) => {
      return new Promise((resolve) => {
        resolve({
          success: !!response?.data.fileUrl,
          url: response?.data.fileUrl,
          errorMessage: response?.data.fileUrl ? undefined : response?.msg
        })
      })
    },
    headers: (parameters: { file: File | Blob, extParameters: Record<string, any> }) => {
      console.log(parameters)
      return {}
    },
    data: (parameters: { file: File | Blob, extParameters: Record<string, any> }) => {
      return {}
    },
    
    handleRequest: (file: File, filename: string, parameters: { extParameters: Record<string, any> }) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            success: true,
            url: 'https://object.gcongo.com.cn/onecode-travel/nonClassic/8cefe379c03b5f39cd8ef725293a3c02/2024/5/1715995588295/d0b5bb458b694130be0c63e2f1d0090b.png'
          })
        }, 1000)
      })
    },
    // 网络图片，将URL传给后端，让后端下载后校验、转换、压缩等操作
    handleRequestByUrl: (url: string, parameters: { extParameters: Record<string, any> }) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            success: true,
            url: 'https://object.gcongo.com.cn/onecode-travel/nonClassic/8cefe379c03b5f39cd8ef725293a3c02/2024/5/1715995588295/d0b5bb458b694130be0c63e2f1d0090b.png'
          })
        }, 1000)
      })
    }
  },
  // 音频
  audioUploadOptions: {
    action: '/api/man/file/upload',
    headers: (parameters: { file: File | Blob, extParameters: Record<string, any> }) => {
      return {
        Appkey: 'dsy_2AeyG8N0CqEC',
        Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJNell4T1RnNE1qSmtOVGhuWnpVM05qbGlaamM2WWpFMlpUTTBNak16Tnpkbk16RXhNVEkyTVRJek9VSk1SRnRNTjFZPTQ2VkdDWk84VzFDUSIsImlzcyI6IjM2MTFlY2IyYTY3NzMzZDk1OTI4OWQzYzM4ZjY0Y2Q3Iiwic3ViIjoiQVBQIiwiYXVkIjoiZHN5XzJBZXlHOE4wQ3FFQyIsImlhdCI6MTcxNjY4NzU2MCwiZXhwIjoxNzE3MjkyMzYwfQ.PPhupuc_X0yHB3ex1dVEGVdFyCMmlGYRvZHokVIGcaU'
      }
    },
    data: (parameters: { file: File | Blob, extParameters: Record<string, any> }) => {
      return {}
    },
    handlerResponse: (response: any) => {
      return { url: response.data, errorMessage: response.msg }
    }
  },
  // 视频
  videoUploadOptions: {
    action: '/api/man/file/upload',
    headers: (parameters: { file: File | Blob, extParameters: Record<string, any> }) => {
      return {
        Appkey: 'dsy_2AeyG8N0CqEC',
        Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJNell4T1RnNE1qSmtOVGhuWnpVM05qbGlaamM2WWpFMlpUTTBNak16Tnpkbk16RXhNVEkyTVRJek9VSk1SRnRNTjFZPTQ2VkdDWk84VzFDUSIsImlzcyI6IjM2MTFlY2IyYTY3NzMzZDk1OTI4OWQzYzM4ZjY0Y2Q3Iiwic3ViIjoiQVBQIiwiYXVkIjoiZHN5XzJBZXlHOE4wQ3FFQyIsImlhdCI6MTcxNjY4NzU2MCwiZXhwIjoxNzE3MjkyMzYwfQ.PPhupuc_X0yHB3ex1dVEGVdFyCMmlGYRvZHokVIGcaU'
      }
    },
    data: (parameters: { file: File | Blob, extParameters: Record<string, any> }) => {
      return {}
    },
    handlerResponse: (response: any) => {
      return { url: response.data, errorMessage: response.msg }
    }
  }
})

2.使用组件

<template>
  <KbTinymceEditor
    v-model="text"
    :extParameters="{a: 1}"
  />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const text = ref<string>('')

onMounted(() => {
  console.log('onMounted')
})
</script>

三、Api

1.全局属性

interface TinymceEditorGlobalOptions {
  /** 富文本编辑器选项 */
  options?: RawEditorOptions;

  /** 图片上传选项 */
  imageUploadOptions?: ImageUploadOptions;
  
  /** 音频上传选项 */
  audioUploadOptions?: AudioUploadOptions;

  /** 视频上传选项 */
  videoUploadOptions?: VideoUploadOptions;
}

2.组件属性

interface ComponentOptions {
  /** vue2 v-model */
  value?: string
  /** 是否禁止编辑 */
  disabled?: boolean;
  /** 额外参数 */
  extParameters?: Record<string, any>;

  /** 富文本编辑器选项 */
  options?: Partial<RawEditorOptions>

  /** 图片上传选项 */
  imageUploadOptions?: ImageUploadOptions;
  
  /** 音频上传组件选项 */
  audioUploadOptions?: AudioUploadOptions;

  /** 视频上传选项 */
  videoUploadOptions?: VideoUploadOptions;

  /** 初始化完成 */
  initComplete?: (params: { editorIns: Editor }) => void;
}

3.图片上传配置

export interface ImageUploadOptions {
  /** 上传的文件字段名 - 默认: file */
  name?: string;
  /** 接受上传的文件类型 - 默认: ['jpg', 'jpeg', 'png', 'bmp', 'heif', 'heic', 'gif', 'webp'] */
  accept?: string[];
  /** 是否支持多选文件 - 默认: true */
  multiple?: boolean;
  /** 单次最大限制 - 默认: 10 */
  singleLimit?: number;
  /** 最大允许上传个数 */
  limit?: number;
  /** 是否禁用 - 默认: false */
  disabled?: boolean;
  /** 隐藏内置上传文件之前的loading效果 - 默认: false */
  hideInnerBeforeUploadLoading?: boolean;
  /** 校验选项 */
  checkOptions?: ImageUploadCheckOptions;
  /** 压缩选项 */
  compressorOptions?: ImageUploadCompressorOptions;
  /** 剪裁选项 */
  cropOptions?: ImageUploadCropOptions;

  /** 上传地址(启用必传) */
  action?: string;
  /** 请求头 */
  headers?: (parameters: { file: File | Blob | undefined, extParameters?: Record<string, any> }) => Record<string, any>;
  /** 额外请求体 */
  data?: (parameters: { file: File | Blob | undefined, extParameters?: Record<string, any> }) => Record<string, any>;
  /** 响应处理(启用必传) */
  handlerResponse?: (response: any) => { success: boolean; url?: string; errorMessage?: string }
  /** 图片上传请求处理(图片粘贴、复制时调用) */
  handleRequest?: (file: File, filename: string, options?: {
    extParameters?: Record<string, any>
  }) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
  /** 图片URL上传请求处理（图片粘贴、复制时调用,前端跨域，交给后端处理） */
  handleRequestByUrl?: (url: string, options?: {
    extParameters?: Record<string, any>
  }) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
}

4.视频上传配置

export interface VideoUploadOptions {
  /** 是否启用 */
  enable?: boolean;
  /** 最大尺寸(M) */
  maxSize?: number;
  /** 允许的后缀类型(小写，如: mp4) */
  allowedType?: string[];
  /** 文件接收的类型 */
  accept?: string;
  /** 上传地址(启用必传) */
  action?: string;
  /** 请求头 */
  headers?: (parameters: { file: File | Blob, extParameters?: Record<string, any> }) => Record<string, any>;
  /** 额外请求体 */
  data?: (parameters: { file: File | Blob, extParameters?: Record<string, any> }) => Record<string, any>;
  /** 上传之前回调结束(开始调用上传接口) */
  beforeUploadEnd?: (file: File | Blob) => void
  /** 响应处理(启用必传) */
  handlerResponse?: (response: any) => { url?: string; errorMessage?: string }
}

5.音频上传配置

export interface AudioUploadOptions {
  /** 是否启用 */
  enable?: boolean;
  /** 最大尺寸(M) */
  maxSize?: number;
  /** 允许的后缀类型(小写，如: mp4) */
  allowedType?: string[];
  /** 文件接收的类型 */
  accept?: string;
  /** 上传地址(启用必传) */
  action?: string;
  /** 请求头 */
  headers?: (parameters: { file: File | Blob, extParameters?: Record<string, any> }) => Record<string, any>;
  /** 额外请求体 */
  data?: (parameters: { file: File | Blob, extParameters?: Record<string, any> }) => Record<string, any>;
  /** 上传之前回调结束(开始调用上传接口) */
  beforeUploadEnd?: (file: File | Blob) => void
  /** 响应处理(启用必传) */
  handlerResponse?: (response: any) => { url?: string; errorMessage?: string }
}