@lambo-design/wang-editor 2.0.0-beta.2 → 2.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/wang-editor",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,8 +10,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/shared": "^1.0.0-beta.334",
-    "@lambo-design/core": "^4.7.1-beta.174"
+    "@lambo-design/core": "^4.7.1-beta.175",
+    "@lambo-design/shared": "^1.0.0-beta.334"
   },
   "dependencies": {
     "@wangeditor/editor": "5.1.23",

package/src/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="border: 1px solid #ccc;">
+  <div style="border: 1px solid #ccc; z-index: 999">
     <Toolbar
         style="border-bottom: 1px solid #ccc"
         :editor="editor"
@@ -8,11 +8,12 @@
     />
     <Editor
         style="height: 500px; overflow-y: hidden;"
-        v-model="value"
+        v-model="localValue"
         :defaultConfig="editorConfig"
         :mode="mode"
         @onCreated="onCreated"
         @customPaste="handlePaste"
+        @onChange="handleChange"
     />
   </div>
 </template>
@@ -21,6 +22,7 @@
 import axios from 'axios';
 import {oneOf} from '@lambo-design/shared/utils/platform';
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import '@wangeditor/editor/dist/css/style.css'
 
 export default {
   name: 'LamboWangEditor',
@@ -31,8 +33,11 @@ export default {
       toolbarConfig: {},
       editorConfig: {
         placeholder: '请输入内容...',
-        zIndex: 999
+        zIndex: 999,
+        MENU_CONF: {}
       },
+      localValue: this.value,
+      pendingContent: null,
     }
   },
   props: {
@@ -114,7 +119,21 @@ export default {
      */
     excludeKeys: {
       type: Array,
-      default: []
+      default: () => []
+    },
+    /**
+     * @description 是否使用自定义图片样式插入
+     */
+    useCustomImageStyle: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 自定义图片宽度比例或像素值
+     */
+    customImageWidth: {
+      type: String,
+      default: '30%'
     }
 
   },
@@ -133,16 +152,56 @@ export default {
     },
   },
   methods: {
+    setHtml(val) {
+      if (this.editor) {
+        this.editor.setHtml(val)
+      } else {
+        // 编辑器尚未初始化时的处理
+        console.warn('Editor not initialized yet, queuing the content update...');
+        // 可以考虑缓存内容，等待编辑器初始化后设置
+        this.pendingContent = val;
+      }
+    },
+    handleChange(editor) {
+      const html = editor.getHtml();
+      const text = editor.getText();
+      if (this.cache) {
+        localStorage.editorCache = html;
+      }
+      this.$emit('input', this.valueType === 'html' ? html : text);
+      this.$emit('on-change', html, text);
+    },
     onCreated(editor) {
       this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+      // 加载本地存储内容或传入的 value
+      const htmlCache = this.value || localStorage.getItem('editorCache');
+      if (this.cache && htmlCache && !this.value) {
+        this.editor.setHtml(htmlCache);
+      }
+      // 处理初始化前设置的内容
+      if (this.pendingContent != null) {
+        this.editor.setHtml(this.pendingContent);
+        this.pendingContent = null;
+      }
     },
     handlePaste(editor, event, callback) {
       if (this.preservePasteStyle) {
         // 保留源格式的处理
         const html = event.clipboardData.getData('text/html')
+
+        const items = event.clipboardData.items;
+        // 检查是否有图片数据
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+          if (item.type.indexOf('image') !== -1) {
+            // 有图片数据，让编辑器处理
+            callback(true); // 允许默认粘贴行为
+            return;
+          }
+        }
         if (html) {
           // 插入带格式的HTML
-          editor.setHtml(html)
+          editor.dangerouslyInsertHtml(html)
         } else {
           // 没有HTML内容时回退到纯文本
           editor.insertText(event.clipboardData.getData('text/plain'))
@@ -157,34 +216,54 @@ export default {
       callback(false)
     },
   },
-  mounted() {
+  created() {
+    let self = this
     // 如果仅仅想排除掉某些菜单，其他都保留，可以使用 excludeKeys 来配置。可通过 toolbar.getConfig().toolbarKeys 查看工具栏的默认配置
-    this.toolbarConfig.excludeKeys = this.excludeKeys
+    this.toolbarConfig.excludeKeys = [
+      ...this.excludeKeys,
+      'insertImage',         // 网络图片
+      'group-video',         // 视频菜单组
+    ]
 
     this.editorConfig.MENU_CONF['uploadImage'] = {
       // base64 限制大小，小于该值就插入 base64 格式（而不上传），默认为 0
       base64LimitSize: this.uploadImgShowBase64 ? 5 * 1024 * 1024 : 0,
 
       async customUpload(files, insertFn) {
+        console.log("customUpload",files)
         const formData = new FormData();
-        for (const file of files) {
-          formData.append('file', file);
+        // 检查 files 是否为数组
+        if (Array.isArray(files)) {
+          for (const file of files) {
+            formData.append('file', file);
+          }
+        } else {
+          // 如果 files 不是数组，直接 append
+          formData.append('file', files);
         }
         try {
           const response = await axios.post(
-              this.ossServerContext + this.ossFilePutUrl,
+              self.ossServerContext + self.ossFilePutUrl,
               formData
           );
 
           if (response.data.code == "1") {
             const result = response.data.data;
             const imageList = result.map(item => ({
-              url: this.ossServerContext + this.ossFileGetImgUrl + item.fileId,
+              url: self.ossServerContext + self.ossFileGetImgUrl + item.fileId,
               alt: item.fileName
             }));
             // 循环插入每张图片
             imageList.forEach(imageData => {
-              insertFn(imageData.url, imageData.alt, imageData.url);
+              if (self.useCustomImageStyle) {
+                // 使用自定义样式插入
+                const imgUrl = imageData.url;
+                const imgHtml = `<img src="${imgUrl}" alt="${imageData.alt}" style="width: ${self.customImageWidth};"/>`;
+                self.editor.dangerouslyInsertHtml(imgHtml);
+              } else {
+                // 使用默认方式插入
+                insertFn(imageData.url, imageData.alt, imageData.url);
+              }
             });
           }
         } catch (error) {
@@ -195,16 +274,6 @@ export default {
       // 注意：不需要修改的配置可以省略，wangEditor 会自动合并默认配置
     }
 
-    this.editorConfig.onChange = (editor) => {
-      const html = editor.getHtml();
-      const text = editor.getText();
-      if (this.cache) {
-        localStorage.editorCache = html;
-      }
-      this.$emit('input', this.valueType === 'html' ? html : text);
-      this.$emit('on-change', html, text);
-    }
-
     this.editorConfig.MENU_CONF['insertLink'] = {
       checkLink: (text, link) => {
         if (!/^https?:\/\/[^\s/$.?#].[^\s]*$/.test(link)) {
@@ -216,13 +285,6 @@ export default {
         return true;
       }
     }
-
-    // 加载本地存储内容或传入的 value
-    const htmlCache = this.value || localStorage.getItem('editorCache');
-
-    if (html) {
-      editor.setHtml(htmlCache);
-    }
   },
   beforeDestroy() {
     const editor = this.editor