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

Emit input whenever WYSIWYG content is updated (#13802)

Browse Source 
* Emit input whenever WYSIWYG content is updated

* Update value when initialized for direct page loads

* Remove emit value on init

* Emit only when the observer exists

* Set count before observer check

* Remove extraneous init call

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
This commit is contained in:
ian
2022-06-10 03:43:33 +08:00
committed by GitHub
parent 008e9d50e0
commit 50e1993bb8
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,11 +5,11 @@
v-model="internalValue"
:init="editorOptions"
:disabled="disabled"
model-events="change keydown blur focus paste ExecCommand SetContent"
model-events="change keydown blur focus paste ExecCommand SetContent Init"
@focusin="setFocus(true)"
@focusout="setFocus(false)"
@focus="setupContentWatcher"
@set-content="setCount"
@set-content="contentUpdated"
/>
<template v-if="softLength">
<span
@@ -412,6 +412,7 @@ export default defineComponent({
sourceCodeButton,
setupContentWatcher,
setCount,
contentUpdated,
storageAssetTransform,
storageAssetPresets,
};
@@ -421,14 +422,21 @@ export default defineComponent({
count.value = iframeContents?.textContent?.replace('\n', '')?.length ?? 0;
}
function contentUpdated() {
setCount();
if (!observer) return;
emit('input', editorRef.value.getContent() ? editorRef.value.getContent() : null);
}
function setupContentWatcher() {
if (observer) return;
const iframeContents = editorRef.value.contentWindow.document.getElementById('tinymce');
observer = new MutationObserver((_mutations) => {
count.value = iframeContents?.textContent?.replace('\n', '')?.length ?? 0;
emit('input', editorRef.value.getContent() ? editorRef.value.getContent() : null);
contentUpdated();
});
const config = { characterData: true, childList: true, subtree: true };