Bug 22661 - TinyMCE/WYSIWYG editor doesn't translate
Summary: TinyMCE/WYSIWYG editor doesn't translate
Alias: None
Product: Koha
Classification: Unclassified
Component: I18N/L10N (show other bugs)
Version: master
Hardware: All All
: P5 - low normal (vote)
Assignee: Owen Leonard
QA Contact: Testopia
Depends on:
Blocks: 25862
  Show dependency treegraph
Reported: 2019-04-08 18:18 UTC by Katrin Fischer
Modified: 2020-11-30 21:52 UTC (History)
4 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Text to go in the release notes:
Version(s) released in:

Screenshot of the new TinyMCE editor interface (13.28 KB, image/png)
2019-10-08 15:35 UTC, Owen Leonard

Note You need to log in before you can comment on or make changes to this bug.
Description Katrin Fischer 2019-04-08 18:18:58 UTC
The WYSIWYG editor used by Koha doesn't translate. This includes the tool tips for the various buttons, the format list (Paragraph, Heading) and the text in the HTML pop-up.
Comment 1 Magnus Enger 2019-07-29 11:40:32 UTC
(In reply to Katrin Fischer from comment #0)
> The WYSIWYG editor used by Koha doesn't translate. This includes the tool
> tips for the various buttons, the format list (Paragraph, Heading) and the
> text in the HTML pop-up.

Does it not translate at all, or are there just some things that do not translate? It does seem to have its own translation system: https://www.tiny.cloud/get-tiny/language-packages/
Comment 2 Katrin Fischer 2019-07-29 11:56:17 UTC
For me it didn't translate at all, especially mouse-overs of the icons etc.
Comment 3 Magnus Enger 2019-07-29 12:00:12 UTC
We do have a "langs" dir here: http://git.koha-community.org/gitweb/?p=koha.git;a=tree;f=koha-tmpl/intranet-tmpl/lib/tiny_mce but it only has a file called en.js. Maybe we need to add more files there, and figure out a way to tell TinyMCE to use them, based on the active language?
Comment 4 Owen Leonard 2019-07-29 12:03:34 UTC
I think we might need to do our own translations: Create an include file like we have with datatables.inc.
Comment 5 Owen Leonard 2019-10-08 15:29:35 UTC
This is ready for testing, bug Bugzilla rejects the patches because of the size. I've posted the branch here:


I have also put a downloadable patch here in case that helps: https://zivotdesign.com/download/bug-22661.patch
Comment 6 Owen Leonard 2019-10-08 15:35:00 UTC
Created attachment 93885 [details]
Screenshot of the new TinyMCE editor interface
Comment 7 Owen Leonard 2019-10-08 15:40:41 UTC
(In reply to Owen Leonard from comment #5)
> This is ready for testing

Cancel that, need to add some things!
Comment 8 Owen Leonard 2019-10-08 16:25:02 UTC
Updated the remote branch and downloadable patch.
Comment 9 Michal Denar 2019-10-08 19:37:25 UTC
Any test plan?
Comment 10 Owen Leonard 2019-10-09 11:57:59 UTC
(In reply to Michal Denar from comment #9)
> Any test plan?

Yes, in the commit message:

This patch updates the TinyMCE editor to the latest version (5.0.16) and
adds a translatable include file which will allow the TinyMCE interface
to show the same translation as Koha.

The configuration of the editor has been updated according to the new
version's requirements, keeping all the tools available we had before
and adding emoji support.

To test, apply the patch and enable the UseWYSIWYGinSystemPreferences
system preference.


 - Go to Administration -> System preferences -> OPAC.
 - Multiple instances of the TinyMCE editor should appear on the page:
   opaccredits, OpacCustomSearch, OpacLoginInstructions, etc.
 - Test adding and editing content to one or more of these editors.
   Confirm that the various editor tools work correctly.
 - Verify that changing the contents of any editor (including via paste)
   enables the corresponding "Save all X preferences" button.

 - Test the news editor under Tools -> News.

 - Test the library "OPAC info" editor in libraries administration:
   Administration -> Libraries -> Edit library -> OPAC info.


 - Update a translation:

   > cd misc/translator
   > perl translate update fr-FR

 - Open the corresponding .po file for the staff client, e.g.
 - Locate strings pulled from includes/str/tinymce_i18n.inc for
   translation, e.g.:

   #. SCRIPT
   #: intranet-tmpl/prog/en/includes/str/tinymce_i18n.inc:1
   #, fuzzy
   msgid "File"
   msgstr "Fichier :"

 - Edit the "msgstr" string however you want (it's just for testing) and
   remove the "fuzzy" line.
 - Install the updated translation:

   > perl translate install fr-FR

 - Go to Administration -> System preferences -> OPAC.
 - In each instance of the TinyMCE editor, the first menu item should
   have as its label the translation "msgstr" string you edited.

 - Check that the "About" page shows updated information about
   the TinyMCE version, 5.0.16.
Comment 11 Josef Moravec 2019-10-16 08:40:47 UTC
Everything works as expected, thanks Owen!
Comment 12 Katrin Fischer 2019-10-24 06:28:26 UTC
Wanted to test this, but the git link gives me an error - hope the branch was not lost?

Comment 13 Owen Leonard 2019-10-24 13:09:01 UTC
Sorry, that was a mistake! It's back:
> https://gitlab.com/koha-dev/koha-dev/commits/bug-22661-tinymce-upgrade
Comment 14 Katrin Fischer 2019-11-02 10:33:13 UTC
I really love the handling of the newer editor and fixing the translatability bug is almost just icing on the cake. Much more modern and I think I discovered some features that weren't there before (or that I always missed).

Also tested the news editor.

Thx Owen! PQA!
Comment 15 Martin Renvoize 2019-11-03 07:47:17 UTC
Nice work!

Pushed to master for 19.11.00