feat: 在编辑区域隐藏文件占位符

src/views/demo/copyImgToInput.vue

@@ -211,24 +211,44 @@ const processFile = (file) => {
 };
 
 // 在编辑区域插入占位符
+// const insertPlaceholder = (fileId) => {
+//     const placeholder = `[file:${fileId}]`;
+//     const selection = window.getSelection();
+
+//     if (selection.rangeCount > 0) {
+//         const range = selection.getRangeAt(0);
+//         range.deleteContents();
+//         range.insertNode(document.createTextNode(placeholder));
+
+//         // 移动光标到占位符后面
+//         const newRange = document.createRange();
+//         newRange.setStartAfter(range.endContainer);
+//         newRange.collapse(true);
+//         selection.removeAllRanges();
+//         selection.addRange(newRange);
+//     }
+
+//     emit('update:modelValue', editableDiv.value.innerHTML);
+// };
+
+// 在编辑区域隐藏占位符
 const insertPlaceholder = (fileId) => {
-    const placeholder = `[file:${fileId}]`;
+    const placeholder = document.createElement('span');
-    const selection = window.getSelection();
+    placeholder.dataset.filePlaceholder = fileId;
+    placeholder.textContent = ''; // 空内容
 
+    const selection = window.getSelection();
     if (selection.rangeCount > 0) {
         const range = selection.getRangeAt(0);
         range.deleteContents();
-        range.insertNode(document.createTextNode(placeholder));
+        range.insertNode(placeholder);
 
-        // 移动光标到占位符后面
         const newRange = document.createRange();
-        newRange.setStartAfter(range.endContainer);
+        newRange.setStartAfter(placeholder);
         newRange.collapse(true);
         selection.removeAllRanges();
         selection.addRange(newRange);
     }
-
-    emit('update:modelValue', editableDiv.value.innerHTML);
 };
 
 // 移除附件
@@ -341,4 +361,11 @@ onMounted(() => {
         @apply w-full h-full flex items-center justify-center text-xs text-gray-500 bg-gray-100;
     }
 }
+
+.rich-input-editable {
+    // 隐藏所有文件占位符
+    [data-file-placeholder] {
+        display: none;
+    }
+}
 </style>