@longhongguo/form-create-ant-design-vue 3.3.24 → 3.3.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.3.24",
+  "version": "3.3.25",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/components/FcEditorWrapper.vue

@@ -52,6 +52,10 @@ export default defineComponent({
       // 当只读状态变化时，更新编辑器状态
       if (this._editor) {
         this.setReadOnlyMode(newVal)
+        // 如果是只读模式，设置图片点击监听
+        if (newVal) {
+          this.setupImageClickHandler(this._editor)
+        }
       }
     }
   },
@@ -537,17 +541,21 @@ export default defineComponent({
         // 立即设置一次
         this.$nextTick(() => {
           this.setReadOnlyMode(true)
+          this.setupImageClickHandler(editor)
         })
 
         // 第一次延迟：等待编辑器 DOM 创建
         setTimeout(() => {
           this.setReadOnlyMode(true)
+          this.setupImageClickHandler(editor)
           // 第二次延迟：确保设置生效
           setTimeout(() => {
             this.setReadOnlyMode(true)
+            this.setupImageClickHandler(editor)
             // 第三次延迟：确保完全生效
             setTimeout(() => {
               this.setReadOnlyMode(true)
+              this.setupImageClickHandler(editor)
             }, 300)
           }, 200)
         }, 100)
@@ -1037,6 +1045,90 @@ export default defineComponent({
         }
       })
     },
+    // 设置图片点击处理器（用于只读/预览模式下向父窗口发送预览消息）
+    setupImageClickHandler(editor) {
+      if (!editor) return
+
+      // 如果已经有处理器，先清理
+      if (this._imageClickHandler && this._imageClickContainer) {
+        this._imageClickContainer.removeEventListener(
+          'click',
+          this._imageClickHandler,
+          true
+        )
+      }
+
+      // 查找编辑器文本容器
+      let textContainer = null
+      if (editor.$textElem && editor.$textElem[0]) {
+        textContainer = editor.$textElem[0]
+      } else if (editor.id) {
+        const editorEl = document.getElementById(editor.id)
+        if (editorEl) {
+          textContainer = editorEl.querySelector('.w-e-text')
+        }
+      }
+
+      if (!textContainer) {
+        // 如果找不到容器，延迟重试
+        setTimeout(() => {
+          this.setupImageClickHandler(editor)
+        }, 100)
+        return
+      }
+
+      // 创建图片点击处理器
+      const handleImageClick = (event) => {
+        // 检查是否点击的是图片
+        const target = event.target
+        if (target && target.tagName === 'IMG') {
+          event.preventDefault()
+          event.stopPropagation()
+
+          // 提取图片信息
+          const imgSrc = target.getAttribute('src') || target.src
+          const imgAlt = target.getAttribute('alt') || ''
+          const imgTitle = target.getAttribute('title') || imgAlt
+
+          // 如果图片有链接，提取链接地址
+          let imgUrl = imgSrc
+          const parentLink = target.closest('a')
+          if (parentLink) {
+            imgUrl = parentLink.getAttribute('href') || imgSrc
+          }
+
+          // 发送预览消息到父窗口（类似 Upload 组件）
+          if (window.parent && window.parent !== window) {
+            // 生成一个基于图片 URL 的 uid（用于标识图片）
+            const uid = imgSrc.split('').reduce((acc, char) => {
+              return ((acc << 5) - acc + char.charCodeAt(0)) | 0
+            }, 0)
+
+            window.parent.postMessage(
+              {
+                type: 'upload-preview',
+                file: {
+                  url: imgUrl, // 使用图片 URL 或链接地址
+                  name: imgTitle || imgAlt || '图片', // 使用 title、alt 或默认值
+                  uid: uid, // 基于 URL 生成的标识
+                  size: 0, // 图片大小未知
+                  type: 'image' // 文件类型
+                },
+                timestamp: Date.now()
+              },
+              '*'
+            )
+          }
+        }
+      }
+
+      // 在捕获阶段添加点击监听器（优先级高）
+      textContainer.addEventListener('click', handleImageClick, true)
+
+      // 保存引用以便清理
+      this._imageClickHandler = handleImageClick
+      this._imageClickContainer = textContainer
+    },
     // 验证是否为有效的URL
     isValidUrl(str) {
       if (!str || typeof str !== 'string') return false