Add option to use website languages as the CKEditor5 drop-down languages

Created on 18 July 2023, about 1 year ago
Updated 7 September 2023, about 1 year ago

Problem/Motivation

Currently, CKEditor5 only offers two choices for the language drop-down in the editor: the six UN languages or all available languages. The most likely choice that I would actually want is all of the website's languages as listed at /admin/config/regional/language in order to be compatible with the Translate tab found on each node when logged in.

Steps to reproduce

On an CKEditor5-enabled website that has English as the default and 10 other specific languages enabled:
1. Go to /admin/config/regional/language
2. Note the 11 languages listed
3. Go to /admin/config/content/formats/manage/full_html
4. Click the Language tab

Desired result: Three options:
Website languages
United Nations' official languages
All [however many] languages

Choosing Website languages would cause the Language drop-down to be populated only with Remove language plus one item for each website language and no more.

Actual result: Two options:
United Nations' official languages
All [however many] languages

While this issue exists, if I need a language that is not within the United Nations list, my only current option would be to choose All [however many] languages. However that places a great burden on editors to have to pick out the relatively few languages we use from a long list each time they use any language that which is different from the page language. And, as pointed out in the related issue ๐Ÿ› CKEditor5 language selector unusable Closed: duplicate , that interface does not work very well.

A potential CSS workaround would be to choose All [however many] languages, hide them all, then use nth-child styling to reveal the ones you want. However, it would be a fragile kludge, as any subsequent changes to the list of however many languages would cause the language list to suddenly show different languages until you fixed the CSS.

Alternatively, you could use JavaScript every time the page loads to add the classes "ck-dropdown-language ck-dropdown-language-french" to the French button, "ck-dropdown-language ck-dropdown-language-chinese-traditional" to the Chinese (Traditional) button, etc., for each respective language, set display: none on all buttons having the ck-dropdown-language class, and re-display the languages you want to keep. This would be stable at the cost of adding coding complexity to the website.

Proposed resolution

Add Website languages as an option

Remaining tasks

User interface changes

Add Website languages as an option to the CKEditor5 language configuration dropdown

API changes

Data model changes

Release notes snippet

โœจ Feature request
Status

Closed: duplicate

Version

11.0 ๐Ÿ”ฅ

Component
CKEditor 5ย  โ†’

Last updated about 12 hours ago

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States charles belov San Francisco, CA, US

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024