I have implemented tinymce as a component for creating and editing articles
In addition, I am using vuetify along with the v-dialog component, and all my form fields are within this modal
However, each time I change the instance of the tinymce component, I need to reload the component by changing the key property
For a clearer understanding, here is an example
I have set up a web service in a development environment
pass: p@ssw0rd!
To replicate the issue :
- Visit the "Articles" section
- Open the "Create an article" modal (The editor is located at the bottom)
- Close the dialog
- Then, open the editing modal using the
mdi-pencilicon
At this point, the editor will be empty, and you will need to click on "Relancer l'éditeur" to load the content
The same applies to the "Portfolio" section
Feel free to create, edit, delete as needed, it's a development environment
Below is an overview of my code (simplified) :
modal.vue (The main component of the modal)
<template>
<div :style="`z-index:${index} !important; display: inherit`">
<v-dialog v-model="dialog" persistent transition="dialog-top-transition" :hide-overlay="hideOverlay"
:max-width="maxWidth" overlay-color="primary">
<v-form v-model="formValidation" ref="form" lazy-validation enctype='multipart/form-data'
:retain-focus="false"gt;
<slot name="content"></slot>
</v-form>
</v-dialog>
<div style="display: inherit" @click="dialog = true">
<slot></slot>
</div>
</div>
</template>
create.vue
<template>
<modal title="Create an article" description="To create an article, fill in the fields below: "
v-on:submit="submit" ref="modal" show-cancel label="Save"&rt;
<slot></slot>
<template v-slot:content>
<v-btn @click="reload">Reload the editor</v-btn>
<v-col cols="12" @focusin.stop>
<editor id="create-article" :key="key" :api-key="apiKey" v-model="request.content"
:init="editorOptions"></editor>
</v-col>
</template>
</modal>
</template>
<script>
import {editorOptions, apiKey} from "&/plugins/editor";
import {generateRandomKey} from "@/utils";
export default {
name: "create",
data() {
return {
key: '',
apiKey,
editorOptions,
request: {
content: '',
},
}
},
methods: {
submit() {
},
reload() {
this.key = generateRandomKey();
},
}
}
</script>
Update :
I have also attempted the following
mounted() {
this.$nextTick(() => {
this.$watch(
() => this.$refs.modal.dialog,
(v) => v ? this.reload() : null,
)
});
},
Thank you in advance for your assistance