diff --git a/resources/js/components/SMEditor.vue b/resources/js/components/SMEditor.vue index d141fb1..e3ccf29 100644 --- a/resources/js/components/SMEditor.vue +++ b/resources/js/components/SMEditor.vue @@ -5,10 +5,13 @@ id="tinymce" ref="tinyeditor" v-model="editorContent" - model-events="change keydown blur focus paste" + model-events="change blur focus" output-format="html" :init="init" - @blur="handleBlur" /> + :disabled="props.disabled" + @blur="handleBlur" + @focus="handleFocus" + @change="handleChange" /> @@ -63,54 +66,15 @@ interface PageList { } const props = defineProps({ - disabledEditor: { + modelValue: { + type: String, + required: true, + }, + disabled: { type: Boolean, required: false, default: false, }, - srcContent: { - type: String, - required: false, - default: "", - }, - inputId: { - type: String, - required: false, - default: "", - }, - inputName: { - type: String, - required: false, - default: "content", - }, - placeholder: { - type: String, - required: false, - default: "", - }, - label: { - type: String, - default: "", - required: false, - }, - required: { - type: Boolean, - required: false, - }, - mimeTypes: { - type: Array, - default() { - return []; - }, - required: false, - }, - removeButtons: { - type: Array, - required: false, - default() { - return []; - }, - }, }); const useDarkMode = false; // window.matchMedia("(prefers-color-scheme: dark)").matches; @@ -194,39 +158,34 @@ const init = { }, }; -const editorContent = ref(props.srcContent); -const isActive = ref(false); +const editorContent = ref(props.modelValue); -const emits = defineEmits(["input", "update", "blur"]); - -const handleContentChange = (event) => { - editorContent.value = event.srcElement - ? event.srcElement.value - : event.target.value; - emits("input", editorContent.value); -}; +const emits = defineEmits(["input", "update:modelValue", "blur", "focus"]); +/* Updating value */ const handleInitialContentChange = (newContent) => { newContent = newContent === undefined ? "" : newContent; editorContent.value = newContent; }; -const handleBlur = (event, editor) => { - isActive.value = false; - console.log("blur", editorContent.value, editor); - emits("blur", event); -}; - const initialContent = computed(() => { - return props.srcContent; -}); - -const isDisabled = computed(() => { - return props.disabledEditor; + return props.modelValue; }); watch(initialContent, handleInitialContentChange); +const handleBlur = (event, editor) => { + emits("blur", event); +}; + +const handleFocus = (event, editor) => { + emits("focus", event); +}; + +const handleChange = (event, editor) => { + emits("update:modelValue", editor.getContent()); +}; + const fetchLinkList = () => { const buildPageList = ( pageList, diff --git a/resources/js/views/dashboard/PostEdit.vue b/resources/js/views/dashboard/PostEdit.vue index cbfedad..4504e38 100644 --- a/resources/js/views/dashboard/PostEdit.vue +++ b/resources/js/views/dashboard/PostEdit.vue @@ -40,14 +40,7 @@ - +