fix: 修复使用tinymce菜单栏控件(插入-图片)无法正确附上data-oss-id属性的问题

This commit is contained in:
tyler 2025-10-14 22:48:49 +08:00
parent def245f56a
commit 7844a3c7e6

View File

@ -58,6 +58,9 @@ const content = defineModel<string>('modelValue', {
const editorRef = shallowRef<EditorType | null>(null);
// url -> ossId data-oss-id
const pendingImageMap = new Map<string, string>();
const { isDark, locale } = usePreferences();
const skinName = computed(() => {
return isDark.value ? 'oxide-dark' : 'oxide';
@ -151,16 +154,9 @@ const initOptions = computed((): InitOptions => {
.then((response) => {
const { url, ossId } = response as unknown as UploadResult;
console.log('tinymce上传图片:', url);
// url -> ossId
pendingImageMap.set(url, ossId);
resolve(url);
//
setTimeout(() => {
const imgDom = editorRef.value?.dom.select(`img[src="${url}"]`);
if (imgDom) {
editorRef.value?.dom.setAttrib(imgDom, 'data-oss-id', ossId);
} else {
console.warn('无法获取图片dom, 存储数据可能会出现问题');
}
});
})
.catch((error) => {
console.error('tinymce上传图片失败:', error);
@ -175,6 +171,24 @@ const initOptions = computed((): InitOptions => {
emit('mounted');
loading.value = false;
});
// data-oss-id
editor.on('NodeChange', () => {
if (pendingImageMap.size === 0) return;
pendingImageMap.forEach((ossId, url) => {
const imgDoms = editor.dom.select(`img[src="${url}"]`);
if (imgDoms && imgDoms.length > 0) {
imgDoms.forEach((imgDom) => {
// data-oss-id
if (!editor.dom.getAttrib(imgDom, 'data-oss-id')) {
editor.dom.setAttrib(imgDom, 'data-oss-id', ossId);
console.log('已附加 data-oss-id:', url, ossId);
}
});
pendingImageMap.delete(url);
}
});
});
},
};
});