angulartinymceangular14tinymce-5

TinyMCE - provide language file with language_url


I've set up an Angular 14 app with locally hosted TinyMCE 5, which works so far. I cannot get any localization to work however, as no provided translation file can be found.

The docs state that you have to provide the properties language and language_url, so this is my code:

init: EditorComponent['init'] = {
    language: 'nl',
    language_load: false, // Additionally I've added this, but it makes no difference
    language_url: '/tinymce/langs/nl.js'
}

Whether I put this folder in /public or /src, try to point to it like /src/tinymce/langs/nl.js, src/tinymce/langs/nl.js, ../src/tinymce/langs/nl.js etc, it doesn't matter, I always get an error stating that the file can't be found.

What I think the problem is, is that TinyMCE looks from its own directory (which is in node_modules), but setting tiny's base_url option breaks the whole editor altogether.

A few answers to similar questions have pointed out that you have to specify the full absolute url, but as this differs per deployment environment, this is no option. Also it has to be self-hosted.


Solution

  • First make sure you configured the folder src/assets or public folder in the angular.json

    {
      "projects": {
        "my-app": {
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:application",
              "options": {
                "assets": [
                  "src/assets/",
                  "public/"
                ]
              }
            }
          }
        }
      }
    }
    

    Then configure the assets like pointing to the assets folder.

    init: EditorComponent['init'] = {
        language: 'nl',
        language_load: false, // Additionally I've added this, but it makes no difference
        language_url: '/assets/tinymce/langs/nl.js'
    }