Shared ckconfig cause shared init value

[Pyreweb]

Hi,

I have 3 instances in my Vue (3 differents fields) using the same config object, and if a value is present it displays the same (the last initiated) for the 3 fields. In inspected Vue data, the values are the ones given at data init until I edit the field (then it takes the edited value).

My JS (Vue) :

import Vue from 'vue';

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import '@ckeditor/ckeditor5-build-classic/build/translations/fr';
import CKEditor from '@ckeditor/ckeditor5-vue';

new Vue ({
	el: '#form',
	components: {
		ckeditor: CKEditor.component
	},
	data() {
		return {
			com_pf: server_data.com_pf,
			com_pa: server_data.com_pa,
			com_pe: server_data.com_pe,
			ckEditor: ClassicEditor,
			ckConfig: {
				toolbar: ['undo', 'redo', '|', 'bold', 'italic', 'link'],
				language: 'fr'
			}
		}
	}
}

My HTML/template (the {{{...}}} are Mustache tags) :

<form method="post">
	<ckeditor :editor="ckEditor" :config="ckConfig" tag-name="textarea" name="com_pf" v-model="com_pf">{{{com_pf}}}</ckeditor>
	<ckeditor :editor="ckEditor" :config="ckConfig" tag-name="textarea" name="com_pa" v-model="com_pa">{{{com_pa}}}</ckeditor>
	<ckeditor :editor="ckEditor" :config="ckConfig" tag-name="textarea" name="com_pe" v-model="com_pe">{{{com_pe}}}</ckeditor>
	<button type="submit">Save</button>
</form>

If I don't share the config object (by making a ckConfig1, ckConfig2, ckConfig3), it doesn't display the same value.

PS : using webpack, npm versions :

• "@ckeditor/ckeditor5-build-classic": "^12.4.0",
• "@ckeditor/ckeditor5-vue": "^1.0.0",
• "webpack": "^4.41.2",

[Mgsy]

cc @oleq

[oleq]

Hi, @Pyreweb!

That's a nice catch, I confirm the issue. I also created a PR that will resolve it.

[dzimney]

As a temporary work around, the config object can set using a method call returning the config object.

Vue methods:

methods: {
	getEditorConfig: function() {
		return {
			toolbar: ['undo', 'redo', '|', 'bold', 'italic', 'link'],
			language: 'fr'
		};
	}
}

HTML:

<form method="post">
	<ckeditor :editor="ckEditor" :config="getEditorConfig()" tag-name="textarea" name="com_pf" v-model="com_pf">{{{com_pf}}}</ckeditor>
	<ckeditor :editor="ckEditor" :config="getEditorConfig()" tag-name="textarea" name="com_pa" v-model="com_pa">{{{com_pa}}}</ckeditor>
	<ckeditor :editor="ckEditor" :config="getEditorConfig()" tag-name="textarea" name="com_pe" v-model="com_pe">{{{com_pe}}}</ckeditor>
	<button type="submit">Save</button>
</form>