Localize the editor dynamically based on the locale

[ma2ciek]

It would be an interesting feature, though I'm not sure if doable with our architecture.

For large applications supporting many languages, an editor could load translations dynamically based on the current localization. However, currently, it's not possible as we don't know the base URL for the i18n resources. Also, we would need to think about how the translations should be loaded before the editor starts. There's also a question if the editor should be able to change the localization at runtime (though it's a much larger topic).

I'm most afraid of the delay that would start occurring - loading the translation file before the editor starts. For sure, running a script with translations before the editor script is much faster than loading the editor, running it, and waiting for the translation script to be downloaded and run.

We would need to think about all cases - like integrations with Angular, Vue, Reacts apps, multiple editors localized differently on the same page, etc.

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[RoozmehrKnight]

I'm kinda late on this. Has this feature been implemented yet?

[githubalbumman]

fwiw we had to implement this for our react app, but it is a barbaric implementation where we lazy load CK5 in after first importing the translation file matching the user's desired locale/region. This gives the user the ability to change locale dynamically and doesn't give any appreciable delay in loading. That said, i wish this were built in to CK itself :-)

[arizakevin]

In React, a hack for this is to add a key property to the CKEditor component and update it when the language is changed (for whatever reason, user location, user action, etc...), you could try just setting the key property to be the same as the selected language if your page only has one CKEditor component or to use a UUID generator and change it every time you need the CKEditor component to re-render with the language settings of your (or the user's) choice. Like:

const [uiLanguage, setUiLanguage] = useState("en")

// Whatever logic for changing the language here, like a `handleOnLanguageChange` function thats is called somewhere
// in your code which changes the uiLanguage variable

<CKEditor editor={ Editor }
    key={uiLanguage}
    {/* Rest of your code... */}

That will trigger a re-render of the CKEditor component with the settings for the language set in your uiLanguage state variable.

If you see some weird/ugly/abrupt transitions in the UI of the editor when changing languages, just apply the same approach but by assining the key variable to a parent component to the CKEditor.

Add a 👍 reaction if this helped you! 😁

[Witoso]

@arizakevin thanks for sharing a workaround!

[GregoryEAA]

Is there a way to dynamically change the language for Angular?