@longhongguo/form-create-ant-design-vue 3.3.6 → 3.3.7

package/package.json

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

package/src/components/FcEditorWrapper.vue

@@ -1,7 +1,8 @@
 <template>
   <FcEditor
     :model-value="modelValue"
-    :disabled="disabled"
+    :disabled="disabled && !readOnly"
+    :readOnly="readOnly"
     :config="editorConfig"
     :init="initEditor"
     @update:model-value="$emit('update:modelValue', $event)"
@@ -21,6 +22,7 @@ export default defineComponent({
   props: {
     modelValue: String,
     disabled: Boolean,
+    readOnly: Boolean,
     // 图片上传相关配置
     uploadImgServer: String,
     uploadImgFieldName: {
@@ -37,10 +39,30 @@ export default defineComponent({
     formCreateInject: Object
   },
   emits: ['update:modelValue'],
+  watch: {
+    readOnly(newVal) {
+      // 当只读状态变化时，更新编辑器状态
+      if (this._editor) {
+        this.setReadOnlyMode(newVal)
+      }
+    }
+  },
   computed: {
     editorConfig() {
       const config = {}
 
+      // 如果设置了 readOnly，配置只读模式
+      if (this.readOnly) {
+        // readOnly: true // 启用只读模式
+        // 注意：实际只读效果主要通过 setReadOnlyMode 方法实现
+        // （设置 contenteditable="false" 和阻止编辑事件）
+        // 只读模式允许复制文本和点击链接，但禁止编辑
+        config.readOnly = true
+        // 禁用自动聚焦，避免在只读模式下获得焦点
+        config.focus = false
+        config.autoFocus = false
+      }
+
       // 如果设置了 uploadImgServer，配置图片上传
       if (this.uploadImgServer) {
         // wangeditor 4.x 使用这些配置项
@@ -154,9 +176,603 @@ export default defineComponent({
       return config
     }
   },
+  beforeUnmount() {
+    // 清理粘贴事件监听器
+    if (this._pasteHandler && this._pasteHandlerContainer) {
+      this._pasteHandlerContainer.removeEventListener(
+        'paste',
+        this._pasteHandler,
+        true
+      )
+      this._pasteHandler = null
+      this._pasteHandlerContainer = null
+    }
+
+    // 清理只读模式相关的监听器和定时器
+    if (this._editor) {
+      this.$nextTick(() => {
+        let textContainer = null
+        if (this._editor.$textElem && this._editor.$textElem[0]) {
+          textContainer = this._editor.$textElem[0]
+        } else {
+          const editorId = this._editor.id
+          if (editorId) {
+            const editorEl = document.getElementById(editorId)
+            if (editorEl) {
+              textContainer = editorEl.querySelector('.w-e-text')
+            }
+          }
+        }
+
+        if (textContainer) {
+          // 清除定时器
+          if (textContainer._readOnlyInterval) {
+            clearInterval(textContainer._readOnlyInterval)
+            delete textContainer._readOnlyInterval
+          }
+
+          // 停止观察器
+          if (textContainer._readOnlyAttributeObserver) {
+            textContainer._readOnlyAttributeObserver.disconnect()
+            delete textContainer._readOnlyAttributeObserver
+          }
+          if (textContainer._readOnlyLinkObserver) {
+            textContainer._readOnlyLinkObserver.disconnect()
+            delete textContainer._readOnlyLinkObserver
+          }
+
+          // 移除事件监听器
+          if (textContainer._readOnlyHandlers) {
+            const handlers = textContainer._readOnlyHandlers
+            if (handlers.preventEdit) {
+              textContainer.removeEventListener(
+                'keydown',
+                handlers.preventEdit,
+                true
+              )
+            }
+            if (handlers.preventAllEdit) {
+              textContainer.removeEventListener(
+                'keypress',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'paste',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'drop',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'input',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'beforeinput',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'compositionstart',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'compositionupdate',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'compositionend',
+                handlers.preventAllEdit,
+                true
+              )
+            }
+            delete textContainer._readOnlyHandlers
+          }
+        }
+      })
+    }
+  },
   methods: {
     initEditor(editor) {
-      // 可以在这里添加额外的编辑器初始化逻辑
+      if (!editor) return
+
+      // 保存编辑器引用
+      this._editor = editor
+
+      // 如果设置了只读模式，配置编辑器为只读
+      // 使用多重延迟和监听，确保编辑器完全创建后再设置
+      if (this.readOnly) {
+        // 立即设置一次
+        this.$nextTick(() => {
+          this.setReadOnlyMode(true)
+        })
+
+        // 第一次延迟：等待编辑器 DOM 创建
+        setTimeout(() => {
+          this.setReadOnlyMode(true)
+          // 第二次延迟：确保设置生效
+          setTimeout(() => {
+            this.setReadOnlyMode(true)
+            // 第三次延迟：确保完全生效
+            setTimeout(() => {
+              this.setReadOnlyMode(true)
+            }, 300)
+          }, 200)
+        }, 100)
+      }
+
+      // 等待编辑器完全创建后，监听粘贴事件
+      this.$nextTick(() => {
+        // 尝试多种方式查找编辑器容器
+        let editorContainer = null
+
+        // 方式1: 通过编辑器实例属性查找
+        if (editor.$textContainerElem && editor.$textContainerElem[0]) {
+          editorContainer = editor.$textContainerElem[0]
+        } else if (editor.$textElem && editor.$textElem[0]) {
+          editorContainer = editor.$textElem[0]
+        }
+
+        // 方式2: 通过编辑器 ID 查找
+        if (!editorContainer && editor.id) {
+          const editorEl = document.getElementById(editor.id)
+          if (editorEl) {
+            editorContainer =
+              editorEl.querySelector('.w-e-text-container') ||
+              editorEl.querySelector('.w-e-text')
+          }
+        }
+
+        // 方式3: 通过 class 查找（通用方法）
+        if (!editorContainer) {
+          const textContainer = document.querySelector('.w-e-text-container')
+          if (textContainer) {
+            editorContainer = textContainer
+          }
+        }
+
+        if (editorContainer) {
+          this.setupPasteHandler(editor, editorContainer)
+        } else {
+          // 延迟重试，等待编辑器完全渲染
+          setTimeout(() => {
+            const textContainer =
+              document.querySelector('.w-e-text-container') ||
+              document.querySelector('.w-e-text')
+            if (textContainer && editor) {
+              this.setupPasteHandler(editor, textContainer)
+            } else {
+              console.warn(
+                '无法找到 wangEditor 文本容器，链接自动转换功能可能无法正常工作'
+              )
+            }
+          }, 500)
+        }
+      })
+    },
+    // 设置粘贴事件处理器
+    setupPasteHandler(editor, container) {
+      const handlePaste = (event) => {
+        // 获取粘贴的文本内容
+        const pasteText = (
+          event.clipboardData || window.clipboardData
+        )?.getData('text')
+
+        // 检查是否为纯链接（URL格式）
+        if (pasteText && this.isValidUrl(pasteText.trim())) {
+          // 阻止默认粘贴行为
+          event.preventDefault()
+          event.stopPropagation()
+
+          try {
+            const url = pasteText.trim()
+            // 确保 URL 有协议
+            const fullUrl =
+              url.startsWith('http://') || url.startsWith('https://')
+                ? url
+                : `http://${url}`
+
+            // 尝试使用 wangEditor 的命令插入链接
+            // wangEditor 4.x 支持通过 cmd.do 执行命令
+            if (editor.cmd && editor.cmd.do) {
+              try {
+                // 先插入文本，然后选中并转换为链接
+                editor.cmd.do(
+                  'insertHTML',
+                  `<a href="${fullUrl}" target="_blank" rel="noopener noreferrer">${url}</a>`
+                )
+                return false
+              } catch (e) {
+                // 如果 cmd.do 失败，继续使用 DOM 方式
+                console.debug('使用 cmd.do 插入链接失败，尝试 DOM 方式:', e)
+              }
+            }
+
+            // 使用 DOM 方式插入链接
+            const selection = window.getSelection()
+            if (selection && selection.rangeCount > 0) {
+              const range = selection.getRangeAt(0)
+
+              // 删除选中的内容
+              range.deleteContents()
+
+              // 创建链接元素
+              const linkElement = document.createElement('a')
+              linkElement.href = fullUrl
+              linkElement.textContent = url
+              linkElement.target = '_blank'
+              linkElement.rel = 'noopener noreferrer'
+
+              // 插入链接
+              range.insertNode(linkElement)
+
+              // 移动光标到链接后面，并添加一个空格
+              const textNode = document.createTextNode(' ')
+              range.setStartAfter(linkElement)
+              range.insertNode(textNode)
+              range.setStartAfter(textNode)
+              range.collapse(true)
+              selection.removeAllRanges()
+              selection.addRange(range)
+
+              // 触发编辑器内容变化
+              // 尝试多种方式触发更新
+              if (editor.txt) {
+                // 方式1: 触发 change 事件
+                if (
+                  editor.txt.eventHooks &&
+                  editor.txt.eventHooks.changeEvents
+                ) {
+                  editor.txt.eventHooks.changeEvents.forEach((fn) => {
+                    if (typeof fn === 'function') {
+                      try {
+                        fn()
+                      } catch (e) {
+                        console.debug('触发编辑器变化事件失败:', e)
+                      }
+                    }
+                  })
+                }
+
+                // 方式2: 手动触发 input 事件
+                const inputEvent = new Event('input', {
+                  bubbles: true,
+                  cancelable: true
+                })
+                container.dispatchEvent(inputEvent)
+
+                // 方式3: 触发 change 事件
+                const changeEvent = new Event('change', {
+                  bubbles: true,
+                  cancelable: true
+                })
+                container.dispatchEvent(changeEvent)
+              }
+            }
+          } catch (error) {
+            console.error('插入链接失败:', error)
+            // 如果出错，回退到普通粘贴
+            setTimeout(() => {
+              const textNode = document.createTextNode(pasteText)
+              const selection = window.getSelection()
+              if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0)
+                range.deleteContents()
+                range.insertNode(textNode)
+                range.setStartAfter(textNode)
+                range.collapse(true)
+                selection.removeAllRanges()
+                selection.addRange(range)
+              }
+            }, 0)
+          }
+
+          return false
+        }
+      }
+
+      // 在捕获阶段监听粘贴事件
+      container.addEventListener('paste', handlePaste, true)
+
+      // 保存处理器引用，以便在组件销毁时移除
+      this._pasteHandler = handlePaste
+      this._pasteHandlerContainer = container
+    },
+    // 设置只读模式：允许选择和点击链接，但禁止编辑
+    setReadOnlyMode(readOnly) {
+      if (!this._editor) return
+
+      // 使用 wangEditor 的 disable/enable 方法
+      if (readOnly) {
+        // 禁用编辑器
+        if (
+          this._editor.disable &&
+          typeof this._editor.disable === 'function'
+        ) {
+          this._editor.disable()
+        }
+      } else {
+        // 启用编辑器
+        if (this._editor.enable && typeof this._editor.enable === 'function') {
+          this._editor.enable()
+        }
+      }
+
+      this.$nextTick(() => {
+        // 查找编辑器的文本容器
+        let textContainer = null
+        if (this._editor.$textElem && this._editor.$textElem[0]) {
+          textContainer = this._editor.$textElem[0]
+        } else {
+          const editorId = this._editor.id
+          if (editorId) {
+            const editorEl = document.getElementById(editorId)
+            if (editorEl) {
+              textContainer = editorEl.querySelector('.w-e-text')
+            }
+          }
+        }
+
+        // 也尝试查找容器
+        if (!textContainer) {
+          if (
+            this._editor.$textContainerElem &&
+            this._editor.$textContainerElem[0]
+          ) {
+            textContainer = this._editor.$textContainerElem[0]
+          }
+        }
+
+        if (textContainer) {
+          if (readOnly) {
+            // 强制设置为只读：禁用编辑，但允许选择和点击链接
+            const forceReadOnly = () => {
+              // 强制设置 contenteditable
+              textContainer.setAttribute('contenteditable', 'false')
+              // 确保文本可以选择
+              textContainer.style.userSelect = 'text'
+              textContainer.style.webkitUserSelect = 'text'
+              textContainer.style.mozUserSelect = 'text'
+              textContainer.style.msUserSelect = 'text'
+              textContainer.style.cursor = 'text'
+            }
+
+            forceReadOnly()
+
+            // 监听 contenteditable 属性的变化，强制保持只读
+            const attributeObserver = new MutationObserver(() => {
+              if (textContainer.getAttribute('contenteditable') !== 'false') {
+                forceReadOnly()
+              }
+            })
+            attributeObserver.observe(textContainer, {
+              attributes: true,
+              attributeFilter: ['contenteditable']
+            })
+
+            // 阻止所有编辑操作的事件处理器
+            const preventAllEdit = (e) => {
+              // 阻止所有输入操作
+              e.preventDefault()
+              e.stopPropagation()
+              e.stopImmediatePropagation()
+              return false
+            }
+
+            // 阻止键盘输入（但允许选择快捷键如 Ctrl+A, Ctrl+C）
+            const preventEdit = (e) => {
+              // 允许复制、全选等快捷键
+              if (
+                (e.ctrlKey || e.metaKey) &&
+                (e.key === 'a' || e.key === 'c' || e.key === 'x')
+              ) {
+                return true
+              }
+              // 阻止所有其他键盘输入
+              if (e.key && e.key.length === 1) {
+                e.preventDefault()
+                e.stopPropagation()
+                return false
+              }
+              // 阻止删除键（当没有选中内容时）
+              if (
+                (e.key === 'Delete' || e.key === 'Backspace') &&
+                !e.ctrlKey &&
+                !e.metaKey
+              ) {
+                const selection = window.getSelection()
+                if (
+                  !selection ||
+                  selection.rangeCount === 0 ||
+                  selection.isCollapsed
+                ) {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  return false
+                }
+              }
+            }
+
+            // 添加事件监听器（使用捕获阶段，优先级最高）
+            textContainer.addEventListener('keydown', preventEdit, true)
+            textContainer.addEventListener('keypress', preventAllEdit, true)
+            textContainer.addEventListener('paste', preventAllEdit, true)
+            textContainer.addEventListener('drop', preventAllEdit, true)
+            textContainer.addEventListener('input', preventAllEdit, true)
+            textContainer.addEventListener('beforeinput', preventAllEdit, true)
+            textContainer.addEventListener(
+              'compositionstart',
+              preventAllEdit,
+              true
+            )
+            textContainer.addEventListener(
+              'compositionupdate',
+              preventAllEdit,
+              true
+            )
+            textContainer.addEventListener(
+              'compositionend',
+              preventAllEdit,
+              true
+            )
+
+            // 保存事件处理器引用，以便清理
+            if (!textContainer._readOnlyHandlers) {
+              textContainer._readOnlyHandlers = {}
+            }
+            textContainer._readOnlyHandlers.preventEdit = preventEdit
+            textContainer._readOnlyHandlers.preventAllEdit = preventAllEdit
+            textContainer._readOnlyAttributeObserver = attributeObserver
+
+            // 允许链接点击
+            const enableLinks = () => {
+              const links = textContainer.querySelectorAll('a')
+              links.forEach((link) => {
+                link.style.pointerEvents = 'auto'
+                link.style.cursor = 'pointer'
+              })
+            }
+            enableLinks()
+
+            // 监听新添加的链接
+            const linkObserver = new MutationObserver(() => {
+              enableLinks()
+              // 确保 contenteditable 保持为 false
+              forceReadOnly()
+            })
+            linkObserver.observe(textContainer, {
+              childList: true,
+              subtree: true,
+              attributes: true,
+              attributeFilter: ['contenteditable']
+            })
+            textContainer._readOnlyLinkObserver = linkObserver
+
+            // 定期检查并强制设置（防止被覆盖）
+            if (!textContainer._readOnlyInterval) {
+              textContainer._readOnlyInterval = setInterval(() => {
+                if (textContainer.getAttribute('contenteditable') !== 'false') {
+                  forceReadOnly()
+                }
+              }, 100)
+            }
+          } else {
+            // 取消只读：恢复编辑功能
+            textContainer.setAttribute('contenteditable', 'true')
+
+            // 清除定时器
+            if (textContainer._readOnlyInterval) {
+              clearInterval(textContainer._readOnlyInterval)
+              delete textContainer._readOnlyInterval
+            }
+
+            // 移除事件监听器
+            if (textContainer._readOnlyHandlers) {
+              const handlers = textContainer._readOnlyHandlers
+              textContainer.removeEventListener(
+                'keydown',
+                handlers.preventEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'keypress',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'paste',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'drop',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'input',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'beforeinput',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'compositionstart',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'compositionupdate',
+                handlers.preventAllEdit,
+                true
+              )
+              textContainer.removeEventListener(
+                'compositionend',
+                handlers.preventAllEdit,
+                true
+              )
+              delete textContainer._readOnlyHandlers
+            }
+
+            // 停止观察
+            if (textContainer._readOnlyAttributeObserver) {
+              textContainer._readOnlyAttributeObserver.disconnect()
+              delete textContainer._readOnlyAttributeObserver
+            }
+            if (textContainer._readOnlyLinkObserver) {
+              textContainer._readOnlyLinkObserver.disconnect()
+              delete textContainer._readOnlyLinkObserver
+            }
+          }
+        }
+      })
+    },
+    // 验证是否为有效的URL
+    isValidUrl(str) {
+      if (!str || typeof str !== 'string') return false
+
+      const trimmed = str.trim()
+      if (!trimmed) return false
+
+      try {
+        // 检查是否包含常见协议
+        const urlPattern = /^(https?|ftp|file):\/\//i
+        if (urlPattern.test(trimmed)) {
+          new URL(trimmed)
+          return true
+        }
+
+        // 检查是否看起来像URL（包含域名）
+        // 匹配形如 www.example.com 或 example.com 的格式
+        const domainPattern =
+          /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(\/.*)?$/i
+        // 或者简单的 http/https URL 格式
+        const simpleUrlPattern = /^[a-zA-Z0-9][a-zA-Z0-9\-]*\.[a-zA-Z]{2,}/
+
+        if (domainPattern.test(trimmed) || simpleUrlPattern.test(trimmed)) {
+          // 尝试添加 http:// 前缀来验证
+          try {
+            new URL(`http://${trimmed}`)
+            return true
+          } catch (e) {
+            return false
+          }
+        }
+
+        return false
+      } catch (e) {
+        return false
+      }
     },
     handleDefaultResponse(res, insertImgFn) {
       // 处理标准响应格式: {errno: 0, data: {url: "...", alt: "...", href: "..."}}

package/src/core/alias.js

@@ -40,6 +40,9 @@ export default {
   object: 'fcSubForm',
   image: PRE + 'Image',
   aImage: PRE + 'Image',
+  alert: PRE + 'Alert',
+  aAlert: PRE + 'Alert',
+  Alert: PRE + 'Alert',
   accTable: PRE + 'Table',
   accTableTable: PRE + 'Table'
 }