I have encountered an issue where I am trying to update the content of an inline Vue CKEDITOR 4 component using v-model multiple times. The problem arises when the user enters text in the editor, as any subsequent updates through v-model get overwritten by the user input.
To provide further clarity, I have outlined the steps and code I am working with:
Steps to replicate:
- Set the editor value to 'aaa' explicitly through v-model (non-user change).
- Type 'bbb' in the editor to have 'aaabbb' (user change).
- Explicitly set the editor value to 'ccc' through v-model (non-user change).
Expected outcome:
- 'ccc' should be successfully set and displayed in the editor.
Actual behavior:
- 'ccc' gets set in the editor.
- The value 'aaabbb' is displayed, overwriting the value from step 1.
Code Snippet:
<template>
<div>
<ckeditor
v-model="editorData"
type="inline"
/>
</div>
</template>
export default class EditorWrapper extends Vue {
// Property of the Vue component holding the data passed to the editor in steps 1 and 3.
@Prop({ type: String, default: '' })
externalData!: string;
// Data variable in Vue bound two-way to the editor
editorData: string;
// Watch for changes in the 'externalData' property
@Watch('externalData')
onPropertyChange(externalData) {
// Explicitly update the editor text in cases not changed by the user (steps 1 and 3).
this.editorData = externalData;
}
// Watch for changes in the editor 'v-model' data (changes made by users and non-users)
@Watch('editorData')
onEditorDataChange(data) {
// Incorrect output showing the editor text as 'ccc', then 'aaabbb'.
console.log(data);
}
}