github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improvements to WYSIWYG interface (#12216)

Browse Source 
* Ignore field value updating if it is disabled

* WYSiWYG: Allow to undo Insert image, Insert link, Insert media and Edit source code custom actions

* Bind MutationObserver to correct tinyMCE node

* Fix apply for disabled fields

* Emit null when empty

Co-authored-by: Andrew <trubay.andrey@gmail.com>
Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
This commit is contained in:
ian
2022-03-19 02:53:57 +08:00
committed by GitHub
parent d8615c54c6
commit 6d8b17ed6a
6 changed files with 24 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
View File

@@ -268,31 +268,19 @@ export default defineComponent({
const editorElement = ref<ComponentPublicInstance | null>(null);
const { imageToken } = toRefs(props);
let tinymceEditor: HTMLElement | null;
let count = ref(0);
onMounted(() => {
let iframe;
let contentLoaded = false;
const wysiwyg = document.getElementById(props.field);
const iframeContents = editorRef.value.contentWindow.document.getElementById('tinymce');
if (wysiwyg) iframe = wysiwyg.getElementsByTagName('iframe');
const observer = new MutationObserver((_mutations) => {
count.value = iframeContents?.textContent?.replace('\n', '')?.length ?? 0;
if (iframe && iframe[0] && iframe[0].contentWindow)
tinymceEditor = iframe[0].contentWindow.document.getElementById('tinymce');
emit('input', editorRef.value.getContent() ? editorRef.value.getContent() : null);
});
if (tinymceEditor) {
const observer = new MutationObserver((_mutations) => {
count.value = tinymceEditor?.textContent?.replace('\n', '')?.length ?? 0;
if (!contentLoaded) {
contentLoaded = true;
} else {
emit('input', editorRef.value.getContent());
}
});
const config = { characterData: true, childList: true, subtree: true };
observer.observe(tinymceEditor, config);
}
const config = { characterData: true, childList: true, subtree: true };
observer.observe(iframeContents, config);
});
const { imageDrawerOpen, imageSelection, closeImageDrawer, onImageSelect, saveImage, imageButton } = useImage(

1
app/src/interfaces/input-rich-text-html/useImage.ts
View File

@@ -106,6 +106,7 @@ export default function useImage(editor: Ref<any>, imageToken: Ref<string | unde
});
const imageHtml = `<img src="${resizedImageUrl}" alt="${img.alt}" />`;
editor.value.selection.setContent(imageHtml);
editor.value.undoManager.add();
closeImageDrawer();
}

3
app/src/interfaces/input-rich-text-html/useLink.ts
View File

@@ -126,7 +126,8 @@ export default function useLink(editor: Ref<any>): UsableLink {
editor.value.selection.select(linkNode.value);
editor.value.selection.setNode(linkNode.value);
}
editor.value.undoManager.add();
closeLinkDrawer();
}
}

1
app/src/interfaces/input-rich-text-html/useMedia.ts
View File

@@ -195,6 +195,7 @@ export default function useMedia(editor: Ref<any>, imageToken: Ref<string | unde
} else {
editor.value.selection.setContent(embed.value);
}
editor.value.undoManager.add();
closeMediaDrawer();
}

1
app/src/interfaces/input-rich-text-html/useSourceCode.ts
View File

@@ -40,6 +40,7 @@ export default function useSourceCode(editor: Ref<any>): UsableSourceCode {
function saveCode() {
editor.value.setContent(code.value);
editor.value.undoManager.add();
closeCodeDrawer();
}
}