can't switch lang TH/ENG #5821

PanuwatChinpratan · 2024-04-17T10:41:35Z

PanuwatChinpratan
Apr 17, 2024

i mean dynamic switch lang

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Copy01</title>

    <link
      href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/grapesjs"></script>
    <script src="https://unpkg.com/grapesjs-preset-webpage"></script>
    <script src="https://unpkg.com/grapesjs-blocks-basic"></script>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <div id="gjs"></div>

    <script>
      const editor = grapesjs.init({
        container: "#gjs",
        height: "100%",
        storageManager: false,
        plugins: ["gjs-blocks-basic", "grapesjs-preset-webpage"],
        pageManager: {},
      });
      editor.I18n.addMessages({
        th: {
          styleManager: {
            sectors: {
              general: "1",
              layout: "2",
              typography: "3",
              decorations: "การตก4แต่ง",
              extra: "พิเศษ",
              flex: "Flex",
              dimension: "ขนาด",
            },
          },
        },
      });
      editor.Panels.addButton("options", {
        id: "changelangButton",
        className: "fa fa-language",
        command: "changelangButton", 
        attributes: { title: "Switch Language" },
      });

      editor.Commands.add("changelangButton", {
        run: function (editor) {
          const currentLocale = editor.I18n.getLocale();
          const newLocale = currentLocale === "en" ? "th" : "en";
          editor.I18n.setLocale(newLocale);
          console.log(`Language changed to: ${newLocale}`);
          // Refresh the editor's canvas to apply the language change
          editor.refresh();
        },
      });
    </script>
  </body>
</html>

artf · 2024-04-18T14:43:06Z

artf
Apr 18, 2024
Maintainer

At the moment you have to recreate the editor with the new selected locale.

2 replies

PanuwatChinpratan Apr 22, 2024
Author

Do I have to create a locale folder?

PanuwatChinpratan Apr 22, 2024
Author

U mean this ?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Switch Language</title>

    <link
      href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/grapesjs"></script>
    <script src="https://unpkg.com/grapesjs-preset-webpage"></script>
    <script src="https://unpkg.com/grapesjs-blocks-basic"></script>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <div id="gjs"></div>

    <script>
      function createEditor(locale) {
        return grapesjs.init({
          container: "#gjs",
          height: "100%",
          storageManager: false,
          plugins: ["gjs-blocks-basic", "grapesjs-preset-webpage"],
          pageManager: {},
          locale: locale, // กำหนดค่า locale
        });
      }

      let currentLocale = "en"; // ค่าเริ่มต้นคือภาษาอังกฤษ
      let editor = createEditor(currentLocale);

      editor.I18n.addMessages({
        th: {
          styleManager: {
            sectors: {
              general: "ทั่วไป",
              layout: "การจัดวาง",
              typography: "การตั้งค่าแบบ",
              decorations: "การตกแต่ง",
              extra: "เพิ่มเติม",
            },
          },
        },
      });

      editor.Panels.addButton("options", {
        id: "switchLangButton",
        className: "fa fa-language",
        command: "switchLanguage", 
        attributes: { title: "สลับภาษา" },
      });

      editor.Commands.add("switchLanguage", {
        run: function () {
          currentLocale = currentLocale === "en" ? "th" : "en"; // สลับระหว่างภาษาอังกฤษกับภาษาไทย
          document.getElementById("gjs").innerHTML = ""; // ล้างเนื้อหาเก่า
          editor = createEditor(currentLocale); // สร้าง editor ใหม่
          console.log(`เปลี่ยนภาษาเป็น: ${currentLocale}`);
        },
      });
    </script>
  </body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

can't switch lang TH/ENG #5821

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

can't switch lang TH/ENG #5821

Uh oh!

Uh oh!

PanuwatChinpratan Apr 17, 2024

Replies: 1 comment · 2 replies

Uh oh!

artf Apr 18, 2024 Maintainer

Uh oh!

PanuwatChinpratan Apr 22, 2024 Author

Uh oh!

PanuwatChinpratan Apr 22, 2024 Author

PanuwatChinpratan
Apr 17, 2024

Replies: 1 comment 2 replies

artf
Apr 18, 2024
Maintainer

PanuwatChinpratan Apr 22, 2024
Author

PanuwatChinpratan Apr 22, 2024
Author