diff --git a/src/views/demo/copyImgToInput.vue b/src/views/demo/copyImgToInput.vue index 908107f..c5a67fd 100644 --- a/src/views/demo/copyImgToInput.vue +++ b/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 selection = window.getSelection(); + const placeholder = document.createElement('span'); + 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; + } +}