tinymce 富文本编辑器

一码游 tinymce 编辑器

一、安装

yarn add @keyblade/tinymce-editor

# 需要安装如下:
yarn add @keyblade/[email protected]

二、使用

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

import TinymceEditor from '@keyblade/tinymce-editor'

import { ProImageUpload } from '@keyblade/pro-components'
import '@keyblade/pro-components/es/style.css'
app.use(ProImageUpload)

app.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, options?: { 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, options?: { 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 {
  /** v-model */
  modelValue?: 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 }
}

四、插槽

1.顶部插槽

<KbTinymceEditor>
  <template #top>
    <a-alert>This is an info alert.</a-alert>
  </template>
</KbTinymceEditor>

<!-- 默认 -->
<slot name="top">
  <a-alert>温馨提示：富文本框内插入的链接在小程序端不可用</a-alert>
</slot>