0.2.0 • Published 10 months ago
@keyblade/tinymce-editor-imgpond-vue2 v0.2.0
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-imgpond-vue2
# 下面两个是编辑器需要的第三方依赖，如原项目中有，可以不用安装，但要注意版本，必须匹配，否则css样式有问题。
yarn add pic-viewer@0.5.1
yarn add imgpond@0.6.2二、使用
1.注入组件并设置全局属性（可选）
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.使用组件
<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 选项 */
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选项 */
imgPondOptions?: Record<string, any>;
/** 音频上传组件选项 */
audioUploadOptions?: AudioUploadOptions;
/** 视频上传选项 */
videoUploadOptions?: VideoUploadOptions;
/** 初始化完成 */
initComplete?: (params: { editorIns: Editor }) => void;
}3.图片上传配置
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 }
}0.2.0
10 months ago