@ebiz/designer-components 0.1.124 → 0.1.126

package/src/components/EbizRichTextEditor.vue

@@ -1,339 +1,339 @@
-<template>
-    <div class="ebiz-rich-text-editor" style="border: 1px solid #ccc">
-        <Toolbar 
-            style="border-bottom: 1px solid #ccc" 
-            :editor="editorRef" 
-            :defaultConfig="mergedToolbarConfig" 
-            :mode="mode" 
-        />
-        <Editor 
-            :style="{height: `${height}px`, overflowY: 'hidden'}" 
-            v-model="computedModelValue" 
-            :defaultConfig="mergedEditorConfig" 
-            :mode="mode"
-            @onCreated="handleCreated"
-            @onChange="handleChange"
-            @onDestroyed="handleDestroyed"
-            @onFocus="handleFocus"
-            @onBlur="handleBlur"
-            @customAlert="handleCustomAlert"
-            @customPaste="handleCustomPaste"
-        />
-    </div>
-</template>
-
-<script>
-/**
- * @displayName 富文本编辑器
- * @description 基于WangEditor的富文本编辑器组件，支持图片和视频上传
- * @category 表单组件
- * @name EbizRichTextEditor
- */
-export default {
-    name: "EbizRichTextEditor"
-}
-</script>
-
-<script setup>
-import '@wangeditor/editor/dist/css/style.css'
-import { defineProps, defineEmits, computed, ref, shallowRef, onBeforeUnmount } from 'vue'
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-import dataService from '../apiService/simpleDataService'
-
-// 编辑器实例，必须用 shallowRef
-const editorRef = shallowRef()
-
-// 编辑器内容
-const _valueHtml = ref('')
-
-// 编辑器模式
-const mode = ref('default') // 或 'simple'
-
-const props = defineProps({
-    /**
-     * 绑定的值
-     */
-    modelValue: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 是否禁用
-     */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 是否只读
-     */
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 占位文本
-     */
-    placeholder: {
-        type: String,
-        default: '请输入内容...'
-    },
-    /**
-     * 编辑器高度
-     */
-    height: {
-        type: [String, Number],
-        default: 300
-    },
-    /**
-     * 工具栏配置
-     */
-    toolbarConfig: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     * 编辑器配置
-     */
-    editorConfig: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     * 图片上传路径
-     */
-    imagePath: {
-        type: String,
-        default: 'editor'
-    },
-    /**
-     * 视频上传路径
-     */
-    videoPath: {
-        type: String,
-        default: 'video'
-    },
-    /**
-     * 最大长度
-     */
-    maxLength: {
-        type: Number,
-        default: undefined
-    }
-});
-
-const emit = defineEmits([
-    'update:modelValue',
-    'change',
-    'focus',
-    'blur',
-    'created',
-    'destroyed',
-    'upload-success', // 文件上传成功事件
-    'upload-error'    // 文件上传失败事件
-]);
-
-// 计算属性处理v-model双向绑定
-const computedModelValue = computed({
-    get: () => props.modelValue,
-    set: (val) => {
-        emit('update:modelValue', val);
-    }
-});
-
-// 合并工具栏配置
-const mergedToolbarConfig = computed(() => {
-    return {
-        ...props.toolbarConfig
-    };
-});
-
-// 合并编辑器配置
-const mergedEditorConfig = computed(() => {
-    return {
-        placeholder: props.placeholder,
-        readOnly: props.disabled || props.readonly,
-        maxLength: props.maxLength,
-        MENU_CONF: {
-            uploadImage: {
-                customUpload(file, insertFn) {
-                    // 创建FormData对象用于文件上传
-                    const formData = new FormData();
-                    formData.append('file', file);
-                    
-                    // 如果提供了图片路径参数，添加到FormData中
-                    if (props.imagePath) {
-                        formData.append('path', props.imagePath);
-                    }
-                    
-                    // 使用dataService进行文件上传
-                     dataService.upload('', formData, (_progress) => {
-                         // 上传进度回调，可以在这里显示进度条
-                         // console.log('图片上传进度:', _progress + '%');
-                     })
-                    .then((response) => {
-                        // 上传成功，插入图片到编辑器
-                        let imageUrl = response;
-                        
-                        // 如果返回的是对象，尝试获取url字段
-                        if (typeof response === 'object' && response.url) {
-                            imageUrl = response.url;
-                        } else if (typeof response === 'object' && response.data && response.data.url) {
-                            imageUrl = response.data.url;
-                        }
-                        
-                        // 插入图片到编辑器
-                        insertFn(imageUrl, '', '');
-                        
-                        // 触发成功事件
-                        emit('upload-success', { type: 'image', file, url: imageUrl });
-                    })
-                    .catch((error) => {
-                        // 上传失败处理
-                        // console.error('图片上传失败:', error);
-                        
-                        // 触发失败事件
-                        emit('upload-error', { type: 'image', file, error: error.message || '图片上传失败' });
-                        
-                        // 可以在这里显示错误提示
-                        // 例如使用TDesign的Message组件显示错误信息
-                    });
-                },
-            },
-            uploadVideo: {
-                customUpload(file, insertFn) {
-                    // 创建FormData对象用于文件上传
-                    const formData = new FormData();
-                    formData.append('file', file);
-                    
-                    // 如果提供了视频路径参数，添加到FormData中
-                    if (props.videoPath) {
-                        formData.append('path', props.videoPath);
-                    }
-                    
-                    // 使用dataService进行文件上传
-                     dataService.upload('', formData, (_progress) => {
-                         // 上传进度回调
-                         // console.log('视频上传进度:', _progress + '%');
-                     })
-                    .then((response) => {
-                        // 上传成功，插入视频到编辑器
-                        let videoUrl = response;
-                        
-                        // 如果返回的是对象，尝试获取url字段
-                        if (typeof response === 'object' && response.url) {
-                            videoUrl = response.url;
-                        } else if (typeof response === 'object' && response.data && response.data.url) {
-                            videoUrl = response.data.url;
-                        }
-                        
-                        // 插入视频到编辑器
-                        insertFn(videoUrl, '', '');
-                        
-                        // 触发成功事件
-                        emit('upload-success', { type: 'video', file, url: videoUrl });
-                    })
-                    .catch((error) => {
-                        // 上传失败处理
-                        // console.error('视频上传失败:', error);
-                        
-                        // 触发失败事件
-                         emit('upload-error', { type: 'video', file, error: error.message || '视频上传失败' });
-                     });
-                },
-            },
-            ...props.editorConfig?.MENU_CONF
-        },
-        ...props.editorConfig
-    };
-});
-
-// 编辑器创建完成回调
-const handleCreated = (editor) => {
-    editorRef.value = editor; // 记录编辑器实例
-    emit('created', editor);
-};
-
-// 内容变化事件
-const handleChange = (editor) => {
-    emit('change', editor.getHtml());
-};
-
-// 销毁事件
-const handleDestroyed = (editor) => {
-    emit('destroyed', editor);
-};
-
-// 获得焦点事件
-const handleFocus = (editor) => {
-    emit('focus', editor);
-};
-
-// 失去焦点事件
-const handleBlur = (editor) => {
-    emit('blur', editor);
-};
-
-// 自定义提示事件
-const handleCustomAlert = (info, type) => {
-    // 可以在这里处理编辑器的提示信息
-    // 例如显示Toast或者其他提示组件
-    emit('alert', { info, type });
-};
-
-// 自定义粘贴事件
-const handleCustomPaste = (editor, event, callback) => {
-    // 处理粘贴事件，可以在这里对粘贴内容进行预处理
-    emit('paste', { editor, event });
-    // 返回值（注意，vue 事件的返回值，不能用 return）
-    callback(true); // true 继续默认的粘贴行为
-};
-
-// 组件销毁时，销毁编辑器实例
-onBeforeUnmount(() => {
-    const editor = editorRef.value;
-    if (editor === null) return;
-    editor.destroy();
-});
-
-// 暴露编辑器实例和方法
-defineExpose({
-    editor: editorRef,
-    insertText: (text) => {
-        if (editorRef.value) {
-            editorRef.value.insertText(text);
-        }
-    },
-    getHtml: () => {
-        if (editorRef.value) {
-            return editorRef.value.getHtml();
-        }
-        return '';
-    },
-    getText: () => {
-        if (editorRef.value) {
-            return editorRef.value.getText();
-        }
-        return '';
-    }
-});
-</script>
-
-<style scoped>
-.ebiz-rich-text-editor {
-    border-radius: var(--td-radius-default);
-    overflow: hidden;
-}
-
-.ebiz-rich-text-editor :deep(.w-e-text-container) {
-    z-index: 1; /* 避免编辑区域遮挡其他元素 */
-}
-
-.ebiz-rich-text-editor :deep(.w-e-toolbar) {
-    z-index: 2; /* 确保工具栏在编辑区域之上 */
-}
-
-.ebiz-rich-text-editor :deep(.w-e-text-placeholder) {
-    color: var(--td-text-color-placeholder);
-}
+<template>
+    <div class="ebiz-rich-text-editor" style="border: 1px solid #ccc">
+        <Toolbar 
+            style="border-bottom: 1px solid #ccc" 
+            :editor="editorRef" 
+            :defaultConfig="mergedToolbarConfig" 
+            :mode="mode" 
+        />
+        <Editor 
+            :style="{height: `${height}px`, overflowY: 'hidden'}" 
+            v-model="computedModelValue" 
+            :defaultConfig="mergedEditorConfig" 
+            :mode="mode"
+            @onCreated="handleCreated"
+            @onChange="handleChange"
+            @onDestroyed="handleDestroyed"
+            @onFocus="handleFocus"
+            @onBlur="handleBlur"
+            @customAlert="handleCustomAlert"
+            @customPaste="handleCustomPaste"
+        />
+    </div>
+</template>
+
+<script>
+/**
+ * @displayName 富文本编辑器
+ * @description 基于WangEditor的富文本编辑器组件，支持图片和视频上传
+ * @category 表单组件
+ * @name EbizRichTextEditor
+ */
+export default {
+    name: "EbizRichTextEditor"
+}
+</script>
+
+<script setup>
+import '@wangeditor/editor/dist/css/style.css'
+import { defineProps, defineEmits, computed, ref, shallowRef, onBeforeUnmount } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import dataService from '../apiService/simpleDataService'
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+
+// 编辑器内容
+const _valueHtml = ref('')
+
+// 编辑器模式
+const mode = ref('default') // 或 'simple'
+
+const props = defineProps({
+    /**
+     * 绑定的值
+     */
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否只读
+     */
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 占位文本
+     */
+    placeholder: {
+        type: String,
+        default: '请输入内容...'
+    },
+    /**
+     * 编辑器高度
+     */
+    height: {
+        type: [String, Number],
+        default: 300
+    },
+    /**
+     * 工具栏配置
+     */
+    toolbarConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 编辑器配置
+     */
+    editorConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 图片上传路径
+     */
+    imagePath: {
+        type: String,
+        default: 'editor'
+    },
+    /**
+     * 视频上传路径
+     */
+    videoPath: {
+        type: String,
+        default: 'video'
+    },
+    /**
+     * 最大长度
+     */
+    maxLength: {
+        type: Number,
+        default: undefined
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'change',
+    'focus',
+    'blur',
+    'created',
+    'destroyed',
+    'upload-success', // 文件上传成功事件
+    'upload-error'    // 文件上传失败事件
+]);
+
+// 计算属性处理v-model双向绑定
+const computedModelValue = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+        emit('update:modelValue', val);
+    }
+});
+
+// 合并工具栏配置
+const mergedToolbarConfig = computed(() => {
+    return {
+        ...props.toolbarConfig
+    };
+});
+
+// 合并编辑器配置
+const mergedEditorConfig = computed(() => {
+    return {
+        placeholder: props.placeholder,
+        readOnly: props.disabled || props.readonly,
+        maxLength: props.maxLength,
+        MENU_CONF: {
+            uploadImage: {
+                customUpload(file, insertFn) {
+                    // 创建FormData对象用于文件上传
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    
+                    // 如果提供了图片路径参数，添加到FormData中
+                    if (props.imagePath) {
+                        formData.append('path', props.imagePath);
+                    }
+                    
+                    // 使用dataService进行文件上传
+                     dataService.upload('', formData, (_progress) => {
+                         // 上传进度回调，可以在这里显示进度条
+                         // console.log('图片上传进度:', _progress + '%');
+                     })
+                    .then((response) => {
+                        // 上传成功，插入图片到编辑器
+                        let imageUrl = response;
+                        
+                        // 如果返回的是对象，尝试获取url字段
+                        if (typeof response === 'object' && response.url) {
+                            imageUrl = response.url;
+                        } else if (typeof response === 'object' && response.data && response.data.url) {
+                            imageUrl = response.data.url;
+                        }
+                        
+                        // 插入图片到编辑器
+                        insertFn(imageUrl, '', '');
+                        
+                        // 触发成功事件
+                        emit('upload-success', { type: 'image', file, url: imageUrl });
+                    })
+                    .catch((error) => {
+                        // 上传失败处理
+                        // console.error('图片上传失败:', error);
+                        
+                        // 触发失败事件
+                        emit('upload-error', { type: 'image', file, error: error.message || '图片上传失败' });
+                        
+                        // 可以在这里显示错误提示
+                        // 例如使用TDesign的Message组件显示错误信息
+                    });
+                },
+            },
+            uploadVideo: {
+                customUpload(file, insertFn) {
+                    // 创建FormData对象用于文件上传
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    
+                    // 如果提供了视频路径参数，添加到FormData中
+                    if (props.videoPath) {
+                        formData.append('path', props.videoPath);
+                    }
+                    
+                    // 使用dataService进行文件上传
+                     dataService.upload('', formData, (_progress) => {
+                         // 上传进度回调
+                         // console.log('视频上传进度:', _progress + '%');
+                     })
+                    .then((response) => {
+                        // 上传成功，插入视频到编辑器
+                        let videoUrl = response;
+                        
+                        // 如果返回的是对象，尝试获取url字段
+                        if (typeof response === 'object' && response.url) {
+                            videoUrl = response.url;
+                        } else if (typeof response === 'object' && response.data && response.data.url) {
+                            videoUrl = response.data.url;
+                        }
+                        
+                        // 插入视频到编辑器
+                        insertFn(videoUrl, '', '');
+                        
+                        // 触发成功事件
+                        emit('upload-success', { type: 'video', file, url: videoUrl });
+                    })
+                    .catch((error) => {
+                        // 上传失败处理
+                        // console.error('视频上传失败:', error);
+                        
+                        // 触发失败事件
+                         emit('upload-error', { type: 'video', file, error: error.message || '视频上传失败' });
+                     });
+                },
+            },
+            ...props.editorConfig?.MENU_CONF
+        },
+        ...props.editorConfig
+    };
+});
+
+// 编辑器创建完成回调
+const handleCreated = (editor) => {
+    editorRef.value = editor; // 记录编辑器实例
+    emit('created', editor);
+};
+
+// 内容变化事件
+const handleChange = (editor) => {
+    emit('change', editor.getHtml());
+};
+
+// 销毁事件
+const handleDestroyed = (editor) => {
+    emit('destroyed', editor);
+};
+
+// 获得焦点事件
+const handleFocus = (editor) => {
+    emit('focus', editor);
+};
+
+// 失去焦点事件
+const handleBlur = (editor) => {
+    emit('blur', editor);
+};
+
+// 自定义提示事件
+const handleCustomAlert = (info, type) => {
+    // 可以在这里处理编辑器的提示信息
+    // 例如显示Toast或者其他提示组件
+    emit('alert', { info, type });
+};
+
+// 自定义粘贴事件
+const handleCustomPaste = (editor, event, callback) => {
+    // 处理粘贴事件，可以在这里对粘贴内容进行预处理
+    emit('paste', { editor, event });
+    // 返回值（注意，vue 事件的返回值，不能用 return）
+    callback(true); // true 继续默认的粘贴行为
+};
+
+// 组件销毁时，销毁编辑器实例
+onBeforeUnmount(() => {
+    const editor = editorRef.value;
+    if (editor === null) return;
+    editor.destroy();
+});
+
+// 暴露编辑器实例和方法
+defineExpose({
+    editor: editorRef,
+    insertText: (text) => {
+        if (editorRef.value) {
+            editorRef.value.insertText(text);
+        }
+    },
+    getHtml: () => {
+        if (editorRef.value) {
+            return editorRef.value.getHtml();
+        }
+        return '';
+    },
+    getText: () => {
+        if (editorRef.value) {
+            return editorRef.value.getText();
+        }
+        return '';
+    }
+});
+</script>
+
+<style scoped>
+.ebiz-rich-text-editor {
+    border-radius: var(--td-radius-default);
+    overflow: hidden;
+}
+
+.ebiz-rich-text-editor :deep(.w-e-text-container) {
+    z-index: 1; /* 避免编辑区域遮挡其他元素 */
+}
+
+.ebiz-rich-text-editor :deep(.w-e-toolbar) {
+    z-index: 2; /* 确保工具栏在编辑区域之上 */
+}
+
+.ebiz-rich-text-editor :deep(.w-e-text-placeholder) {
+    color: var(--td-text-color-placeholder);
+}
 </style>