Language not changed of editor when translate to another lang without page reload
dgpoo opened this issue · 0 comments
dgpoo commented
I am using vue-i18n for multi language and when i am changing dropdown all strings updated but ckeditor is not changing without page reload or hot reload from terminal.
Kindly provide method or solution where i can update or reset ckeditor and show in different language without page reload.
Kindly find my below code for referance
<script setup>
import { useI18n } from "vue-i18n";
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ErrorMessage from "~/Components/Partials/ErrorMessage.vue";
import '@ckeditor/ckeditor5-build-classic/build/translations/fa';
defineOptions({
inheritAttrs: false,
});
const { t,locale } = useI18n();
if(locale.value != 'en'){
locale.value = 'fa';
}
const props = defineProps({
modelValue: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
error: {
type: String,
default: '',
},
label: {
type: String,
default: '',
},
placeholder: {
type: String,
default: '',
},
tag: {
type: String,
default: 'textarea'
},
viewType: {
type: String,
default: 'default'
}
});
const emit = defineEmits(['update:modelValue']);
const editor = ClassicEditor;
const editorData = ref(props.modelValue ?? '');
const editorConfig = ref(props.viewType === 'simple' ? {
toolbar: [ 'undo', 'redo', '|', 'link', 'imageUpload', 'mediaEmbed' ],
} : {
language: {
ui:locale.value,
content: locale.value,
},
toolbarLocation: 'bottom'
}); //toolbar, plugins, heading: {options: }
const CKEditorComponent = CKEditor.component;
watch(
() => editorData.value,
(value) => {
emit('update:modelValue', value)
}
);
const placeholder_ = computed(() => props.placeholder && props.placeholder.length > 0 ? t(`placeholder.${props.placeholder}`) : '');
</script>
<template>
<TagLabel :label="label" :required="$attrs?.required ?? true" />
<div class="ckeditor-classic">
<CKEditorComponent
v-model="editorData"
:editor="editor"
:tag-name="tag"
:disabled="$attrs?.disabled ?? false"
:config="editorConfig"
:placeholder="placeholder_"
/>
</div>
<ErrorMessage :error="error" />
</template>
What should i add here to take new language changes here.?
Thanks