HugeRTE localization instructions have been added to the README

[carlosmintfan]

For those that have been waiting for instructions on how to localize TinyMCE, the info has been added to the README.

[markeaston63]

Nicely done. I am on my Summer Holiday. Back at the end of this week. When I am back I assure you I will be in touch.

[MissChocoe]

Do you plan on making packaging language as easy as you have done with CSS with v1.0.7?

[carlosmintfan]

Bundling languages should already work (please tell me if you already tried it and it didn’t work) by simply importing the file using ESM syntax (without importing anything from it), then configuring the language with the lang init option. It may be a good idea to add this to the docs though, I‘ll do it.

[Daniel-Brd]

I'm having an issue with language selection. I've already downloaded the file, renamed tinymce to hugerte and imported it as recommended by the TinyMCE documentation, but it's not working.

[carlosmintfan]

Hi @Daniel-Brd,
Did you also set the language option in the object passed to hugerte.init?
If yes and it’s still not working, please check the browser console for any warnings and errors and paste those you don’t know how to fix here. Additionally, please paste as much code as possible from the file where you are using HugeRTE.

[Daniel-Brd]

Hi! @carlosmintfan

Yes, I have set the language option in hugerte.init, as shown in my code. However, I am getting the following error in the browser console:

Failed to load language: pt_BR from url https://cdn.jsdelivr.net/npm/hugerte@1/langs/pt_BR.js

It seems that HugeRTE is attempting to load the language file from a CDN but fails to find it. I also tried adding the language_url option, pointing to my local file in the application root, as shown below:

{
  language: "pt_BR",
  language_url: "../../pt_BR.js",
}

And it's returning the same error, but with local path

Failed to load language: pt_BR from url ../../pt_BR.js

Below is my current code for reference:

export default function TinyTextEditor() {
  return (
    <>
      <Editor
        init={{
          height: 500,
          menubar: "file edit insert view format table tools",
          language: "pt_BR",
          plugins: [
            "anchor",
            "advlist",
            "autolink",
            "codesample",
            "emoticons",
            "lists",
            "link",
            "image",
            "charmap",
            "preview",
            "searchreplace",
            "visualblocks",
            "fullscreen",
            "insertdatetime",
            "media",
            "table",
            "code",
            "help",
            "wordcount",
          ],
          toolbar:
            "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
          content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
        }}
      />
    </>
  );
}

[carlosmintfan]

Thank you for your answer. Which bundler are you using? (Webpack/Vite/etc.?)

[Daniel-Brd]

I’m using Turbopack by Next.js

[carlosmintfan]

The following only applies if you’re using Vite. If you’re using Webpack, a different approach is necessary. Please tell me in that case.
Please try using import langFileURL from "../../pt_BR.js?url"; then set language_url: langFileURL. (You can change langFileURL to any other valid JavaScript variable name as long as you update it in both places.) The ?url part is important because otherwise Vite would bundle the module into your script which should fail as the language code accesses the global hugerte variable, which doesn’t exist before HugeRTE gets loaded from CDN.
If you later decide to bundle HugeRTE you will be able to simply write import "../../pt_BR.js" without the ?url part and variable name and also remove the language_url option. However, as long as you don’t bundle and therefore HugeRTE gets loaded from jsDelivr CDN, and also if you decide to set a local hugerteScriptSrc prop on the Editor component but still don’t bundle, you‘ll need to follow the approach with the ?url part, variable name and language_url option.
Let me know if it works for you!

[carlosmintfan]

Oh, overlooked your message. Turbopack? Sounds interesting. I‘ll take a look.

[carlosmintfan]

I‘m not familiar with Turbopack and I didn’t find a base to provide something equivalent to my Vite instructions in its docs yet. You can put the language file into the public folder and reference it using an absolute path in the language_url option.

Do you need CDN loading or have any problem with bundling HugeRTE into your fronted bundle? If not and not, please follow the bundling guide. Otherwise, you may place the i18n file into a public folder whose contents are not versioned by Turbopack, but then you should add some unique hash or ID to the filename to make it easy to update your user‘s cache when you have a new version of it (for the new version, use a different name and update it in the code - but that’s not very modern so I recommend you to bundle).

Let me know which way you want to go! :)

[Daniel-Brd]

Hi @carlosmintfan,

Thanks for your response!

I tried adding the language file to the public folder, and the console no longer shows the error:

"Failed to load language: pt_BR from ..."

However, the editor is still not displaying the translation.

To ensure that the public folder setup is working correctly, I tested it by adding a custom external plugin, and it is loading successfully.

Do you have any suggestions on what else I might be missing?

[carlosmintfan]

Hmm. Do you have set both the language and language_url option?

[carlosmintfan]

And would bundling HugeRTE be no solution for you?

[Daniel-Brd]

I've been trying to bundle HugeRTE by following the Next.js documentation on package bundling, but I’m unsure whether I need to install both @hugerte/hugerte-react and hugerte, or just the first package.

I tried installing both, but I still haven’t had any success. Do you have any recommendations on how to properly bundle HugeRTE

[carlosmintfan]

Please follow this bundling guide from my docs. I can't promise it'll work in Turbopack as it is designed for Vite, but just try it out and tell me. You'll need to install both @hugerte/hugerte-react and hugerte, yes.