microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
40.44k stars 3.6k forks source link

How to localize in esm? #1514

Open magicds opened 5 years ago

magicds commented 5 years ago

monaco-editor version: 0.17.1 Browser:: Google Chrome 75.0.3770.142 OS: windows 10

I find an localization demo by using amd Monaco Editor Localization Sample, but how can I make localization by using esm ? Is here any example ?

s97712 commented 5 years ago

+1

s97712 commented 5 years ago

Have you found a solution?

magicds commented 5 years ago

@s97712 Just use the amd moudle to load the monaco-editor.

PunKHS commented 5 years ago

I also need some localize example.

blutorange commented 5 years ago

There is a "solution" which I described here: https://github.com/blutorange/primefaces-monaco/blob/master/ESM-I18N.md Though I'm not quite sure whether it ought to be called it "solution", "hack", or "workaround".

wang12124468 commented 5 years ago

You can use monaco-editor-esm-webpack-plugin to localize in esm. Thanks to @blutorange's mind, I write a plugin to solute it.

jevinpi commented 4 years ago

How did you solve it,i use the amd moudle to load the monaco-editor,but still english。need i set ”availableLanguages“?thankyou!

magicds commented 4 years ago

@jevinpi For amd , You can refer to the official demo Monaco Editor Localization Sample, and also you can refer mine demo at line 96.

jevinpi commented 4 years ago

@jevinpi For amd , You can refer to the official demo Monaco Editor Localization Sample, and also you can refer mine demo at line 96.

i used it in React, can't use require.config to set vs/nls. thankyou anyway, i will try other methods.

peachtang commented 3 years ago

@wang12124468 I don't have any effect using this method (monaco-editor-esm-webpack-plugin)

chanelnumberseven commented 3 years ago

I find a way by using with esm copy-webpack-plugin demo it work for me

zoubeihua commented 3 years ago

问下vue-cli 项目怎么汉化

izhangchao commented 2 years ago

@jevinpi For amd , You can refer to the official demo Monaco Editor Localization Sample, and also you can refer mine demo at line 96.

i used it in React, can't use require.config to set vs/nls. thankyou anyway, i will try other methods.

请问你找到解决方法了吗?

leonaii commented 2 years ago

i used it in vite, can‘t useing , thank you anyway

poerlang commented 2 years ago

When you use vite + vue3 ,try this one:

https://www.npmjs.com/package/@monaco-editor/loader

it work for me.

config like below:

loader.config({ paths: { vs: 'monaco-editor/min/vs' } });  // copy monaco-editor from /node_modules to  /public 
loader.config({
    'vs/nls': {
        availableLanguages: { '*': 'de' }
        // availableLanguages: { '*': 'zh-cn' }
    }
})

@ailongfei @izhangchao

Tnze commented 10 months ago

When you use vite + vue3 ,try this one:

https://www.npmjs.com/package/@monaco-editor/loader

it work for me.

config like below:

loader.config({ paths: { vs: 'monaco-editor/min/vs' } });  // copy monaco-editor from /node_modules to  /public 
loader.config({
    'vs/nls': {
        availableLanguages: { '*': 'de' }
        // availableLanguages: { '*': 'zh-cn' }
    }
})

@ailongfei @izhangchao

It works because it doesn't use ESM at all. It loads monaco-editor from CDN by default.

It dose can load monaco from ESM, but in that case it doesn't support vs/nls. https://github.com/suren-atoyan/monaco-loader/issues/40

Zasa-san commented 9 months ago

monaco-editor version 0.45.0 still has this problem using ESM. Any updates?

xiaoxiaohuayu commented 7 months ago

monaco-editor 版本 0.45.0 在使用 ESM 时仍然存在此问题。有更新吗?

你目前解决了嘛?

Tnze commented 7 months ago

monaco-editor 版本 0.45.0 在使用 ESM 时仍然存在此问题。有更新吗?

你目前解决了嘛?

Just don't use ESM. You can import monaco editor as static resources.

xiaoxiaohuayu commented 7 months ago

monaco-editor 版本 0.45.0 在使用 ESM 时仍然存在此问题。有更新吗?

你目前解决了嘛?

只是不要使用 ESM。您可以将 monaco 编辑器导入为静态资源。

Do you have any examples?

NateScarlet commented 1 week ago

my recipe for load monaco-editor with amd:

const base = 'https://cdn.jsdelivr.net/npm/monaco-editor';

const lang = 'zh-cn';

const injectStyleOnLoad = true;

async function load() {
  // https://github.com/microsoft/monaco-editor/blob/9adbed19a9d5972104e6aff788f2e1ae71e91102/samples/browser-amd-shadow-dom/index.html
  await new Promise((resolve) => {
    const script = document.createElement('script');
    script.src = `${base}/min/vs/loader.js`;
    script.onload = resolve;
    document.head.appendChild(script);
  });
  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
  const monaco = await new Promise<typeof import('monaco-editor')>(
    (resolve) => {
      // spell-checker: word codicon codicons
      const style = document.createElement('style');
      style.innerHTML = `
@font-face {
  font-family: 'codicon';
  src: url('${base}/min/vs/base/browser/ui/codicons/codicon/codicon.ttf')
    format('truetype');
}
`;
      document.head.appendChild(style);

      Object.assign(window, { resolveMonacoEditor: resolve });
      const script = document.createElement('script');
      script.innerHTML = `
require.config(${JSON.stringify({
        paths: {
          vs: new URL(`${base}/min/vs`, window.location.origin),
        },
        'vs/nls': {
          availableLanguages: {
            '*': lang,
          },
        },
        'vs/css': { disabled: !injectStyleOnLoad },
      })});
require(['vs/editor/editor.main'], function () {
  resolveMonacoEditor(monaco);
  delete window.resolveMonacoEditor;
  delete window.monaco;
});      
`;
      document.head.appendChild(script);
    }
  );

  function createStyle() {
    const style = document.createElement('link');
    style.rel = 'stylesheet';
    style.href = `${base}/min/vs/editor/editor.main.css`;
    return style;
  }

  return {
    monaco,
    createStyle,
  };
}

let loadOnce: ReturnType<typeof load> | undefined;

export default async function loadMonacoEditor() {
  if (!loadOnce) {
    loadOnce = load();
    loadOnce.catch(() => {
      loadOnce = undefined;
    });
  }
  return loadOnce;
}