@keyblade/tinymce-editor-vue2 0.0.1 → 0.0.2

package/README.md

@@ -5,3 +5,128 @@
 yarn add @keyblade/tinymce-editor-vue2
 ```
 
+## 二、使用
+### 1.注入组件并设置全局属性
+```typescript
+import TinymceEditor from '@keyblade/tinymce-editor-vue2'
+Vue.use(TinymceEditor, {
+  message: {
+    // 注入 loading 方法
+    loading: () => {
+      const ins = Loading.service({ text: '加载中' })
+      return {
+        close: () => {
+          ins.close()
+        }
+      }
+    }
+  },
+  // 配置图片上传
+  imageUploadHandle: (file, filename) => {
+    return new Promise((resolve) => {
+      resolve({
+        success: true,
+        url: 'https://object.gcongo.com.cn/onecode-travel/nonClassic/8cefe379c03b5f39cd8ef725293a3c02/2024/5/1715995588295/d0b5bb458b694130be0c63e2f1d0090b.png'
+      })
+    })
+  }
+})
+```
+
+### 2.使用组件
+```text
+<template>
+  <TinymceEditor
+    ref="editorRef"
+    v-model="text"
+    :initComplete="initComplete"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import TinymceEditor from '@keyblade/tinymce-editor-vue2'
+
+const text = ref<string>('')
+const editorRef = ref()
+
+// 组件加载完成
+const initComplete = () => {
+  console.log(editorRef.value.insRef)
+  console.log(editorRef.value.editorRef)
+}
+
+onMounted(() => {
+  console.log('onMounted')
+})
+</script>
+```
+
+## 三、Api
+### 1.全局属性
+```typescript
+interface TinymceEditorGlobalOptions {
+  // 消息方法实例
+  message?: {
+    // 加载中
+    loading?: (message?: string) => { close: () => void }
+    // 成功
+    success?: (message?: string) => void
+    // 错误提示
+    error?: (message?: string) => void
+    // 销毁
+    destroy?: () => void
+  }
+  /** 图片上传请求处理，需要返回图片地址 */
+  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;
+  tinymceOptions?: RawEditorOptions
+}
+```
+
+### 2.全局属性
+```typescript
+interface ComponentProps {
+  /** vue2 v-model */
+  value?: string
+  /** vue3 v-model */
+  modelValue?: string
+  /** 图片最大值(单位M，主要用于错误提示) */
+  imageMaxSize?: number;
+  /** 图片允许的类型 */
+  imageAllowedType?: 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?: () => void,
+  /** 富文本编辑器选项 */
+  options?: Partial<RawEditorOptions>
+}
+```

package/package.json

@@ -2,7 +2,7 @@
   "name": "@keyblade/tinymce-editor-vue2",
   "description": "KeyBlade Tinymce Editor Vue2",
   "author": "yangshuai <704807396@qq.com>",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "type": "module",
   "main": "es/index.js",