npm package: @keyblade/tinymce-editor-imgpond-vue2
Description: KeyBlade Tinymce Editor ImgPond Vue2
Author: yangshuai
Latest version: 0.2.3

# tinymce 富文本编辑器
一码游 tinymce 编辑器

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

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

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

yarn add pic-viewer@0.5.1
yarn add imgpond@0.6.2
```

## 二、使用
### 1.注入组件并设置全局属性（可选）
```typescript
import TinymceEditor from '@keyblade/tinymce-editor-imgpond-vue2'

// 如原项目中，则不需要
import PicViewer from 'pic-viewer'
import 'pic-viewer/dist/style.css'

// 如原项目中，则不需要
import ImgPond from 'imgpond'
import 'imgpond/dist/style.css'

Vue.use(PicViewer, {})
Vue.use(ImgPond, {})

Vue.use(TinymceEditor, {
  // 图片
  imageUploadOptions: {
    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.使用组件
```text
<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.全局属性
```typescript
interface TinymceEditorGlobalOptions {
  /** 富文本编辑器选项 */
  options?: RawEditorOptions;

  /** 图片上传选项 */
  imageUploadOptions?: ImageUploadOptions;
  
  /** imgPond 选项 */
  imgPondOptions?: Record<string, any>;

  /** 音频上传选项 */
  audioUploadOptions?: AudioUploadOptions;

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

### 2.组件属性
```typescript
interface ComponentOptions {
  /** vue2 v-model */
  value?: string
  /** 是否禁止编辑 */
  disabled?: boolean;
  /** 额外参数 */
  extParameters?: Record<string, any>;

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

  /** 图片上传选项 */
  imageUploadOptions?: ImageUploadOptions;
  
  /** imgPond选项 */
  imgPondOptions?: Record<string, any>;

  /** 音频上传组件选项 */
  audioUploadOptions?: AudioUploadOptions;

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

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

### 3.图片上传配置
```typescript
export interface ImageUploadOptions {
  /** 图片上传组件最大数量 */
  maxCount?: number;
  /** 图片上传组件下方文字 */
  tipText?: string;
  /** 图片最大值(单位M，主要用于错误提示) */
  maxSize?: number;
  /** 图片允许的后缀类型(小写，如: png、jpg) */
  allowedType?: string[];
  /** 图片最小宽度 */
  minWidth?: number;
  /** 图片最小高度 */
  minHeight?: number;
  /** 图片最大宽度 */
  maxWidth?: number;
  /** 图片最大高度 */
  maxHeight?: number;
  /** 图片上传请求处理 */
  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.视频上传配置
```typescript
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.音频上传配置
```typescript
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 }
}
```