@keyblade/tinymce-editor-vue2

v1.0.4

Published

5 months ago

KeyBlade Tinymce Editor Vue2

Downloads

0High
0Medium
0Low

guccihuiyuan

tinymce 富文本编辑器

一码游 tinymce 编辑器

前提

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

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

版本区分

0.x.x - 图片使用第三方 imgpond 组件
1.x.x - 图片使用自己封装的 ProVue2ImageUpload 组件

一、安装

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

# 0.x.x版本 需要安装如下:
yarn add [email protected]
yarn add [email protected]

# 1.x.x版本 需要安装如下:
yarn add @keyblade/[email protected]

二、使用

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

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

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

// 如原项目中，则不需要(0.x.x版本)
import ImgPond from 'imgpond'
import 'imgpond/dist/style.css'

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

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


Vue.use(TinymceEditor, {
  // 图片
  imageUploadOptions: {
    /** 1.x.x版本新增 */
    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 {}
    },
    /** 1.x.x版本新增 */
    
    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;
  
  /** imgPond 选项（1.x.x版本废弃） */
  imgPondOptions?: Record<string, any>;

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

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

2.组件属性

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

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

  /** 图片上传选项 */
  imageUploadOptions?: ImageUploadOptions;
  
  /** imgPond选项（1.x.x版本废弃） */
  imgPondOptions?: Record<string, any>;

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

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

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

3.图片上传配置

// 1.x.x版本
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}>;
}

// 0.x.x版本
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.视频上传配置

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 }
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

tinymce 富文本编辑器

前提

版本区分

一、安装

二、使用

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

2.使用组件

三、Api

1.全局属性

2.组件属性

3.图片上传配置

4.视频上传配置

5.音频上传配置