@keyblade/tinymce-editor v0.0.12

tinymce 富文本编辑器

封装 tinymce 编辑器，该库不包含任何组件库，主要是是为了兼容 vue2/vue3 同时使用，对于图片上传、视频上传等功能，可使用自定义插件实现。

一、安装

yarn add @keyblade/tinymce-editor

二、使用

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

import TinymceEditor from '@keyblade/tinymce-editor'
// 导入样式
import '@keyblade/tinymce-editor/es/style.css'

Vue.use(TinymceEditor, {
  // 配置消息提示
  message: {
    // 注入 loading 方法
    loading: () => {
      // 可以使用项目中的UI组件，这里以ElementUI为例
      const ins = Loading.service({ text: '加载中' })
      return {
        close: () => {
          ins.close()
        }
      }
    }
  },
  // 配置图片上传
  imageUploadHandle: (file, filename, { extParameters }) => {
    return new Promise((resolve) => {
      resolve({
        success: true,
        url: 'https://object.gcongo.com.cn/onecode-travel/nonClassic/8cefe379c03b5f39cd8ef725293a3c02/2024/5/1715995588295/d0b5bb458b694130be0c63e2f1d0090b.png'
      })
    })
  }
})

2.使用组件

<template>
  <KbTinymceEditor
    v-model="text"
  />
</template>

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

const text = ref<string>('')

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

三、Api

1.全局属性

interface TinymceEditorGlobalOptions {
  // 消息方法实例
  message?: {
    // 加载中
    loading?: (message?: string) => { close: () => void }
    // 成功
    success?: (message?: string) => void
    // 错误提示
    error?: (message?: string) => void
    // 销毁
    destroy?: () => void
  }
  /** 图片上传请求处理，需要返回图片地址 */
  imageUploadHandle?: (file: File | Blob, filename: string, options?: {
    extParameters?: Record<string, any>
  }) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
  /** 接着默认配置进行处理 */
  paste_preprocess?: (editor: Editor, args: {
    content: string;
    readonly internal: boolean;
  }) => void;
  /** 接着默认配置进行处理 */
  paste_postprocess?: (editor: Editor, args: {
    node: HTMLElement;
    readonly internal: boolean;
  }) => void;
  /** tinyMCE编辑器配置 */
  tinymceOptions?: RawEditorOptions
}

2.全局属性

interface ComponentProps {
  /** vue2 v-model */
  value?: string
  /** vue3 v-model */
  modelValue?: string
  /** 是否禁止编辑 */
  disabled?: boolean;
  /** 图片最大值(单位M，主要用于错误提示) */
  imageMaxSize?: number;
  /** 图片允许的类型 */
  imageAllowedType?: string[];
  /** 图片允许的类型 */
  imageAllowedMineType?: string[];
  /** 图片最小宽度 */
  imageMinWidth?: number;
  /** 图片最小高度 */
  imageMinHeight?: number;
  /** 图片最大宽度 */
  imageMaxWidth?: number;
  /** 图片最大高度 */
  imageMaxHeight?: number;
  /** 图片上传请求处理，需要返回图片地址 */
  imageUploadHandle?: (file: File | Blob, filename: string) => Promise<{success: boolean; url?: string; errorMessage?: string}>;
  /** 接着默认配置进行处理 */
  paste_preprocess?: (editor: Editor, args: {
    content: string;
    readonly internal: boolean;
  }) => void;
  /** 接着默认配置进行处理 */
  paste_postprocess?: (editor: Editor, args: {
    node: HTMLElement;
    readonly internal: boolean;
  }) => void;
  /** 初始化完成 */
  initComplete?: (params: { editorIns: Editor }) => void,
  /** tinyMCE选项 */
  options?: Partial<RawEditorOptions>
}