How to use localization in CDN

Exrick commented 3 years ago

monaco-editor version: 0.21.3 Browser:Chrome latest OS:MacOS Playground code that reproduces the issue:

<link rel="stylesheet" data-name="vs/editor/editor.main"
    href="https://cdn.jsdelivr.net/npm/monaco-editor@0.21.3/min/vs/editor/editor.main.css">
  <script>self.require = { paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.21.3/min/vs' } };</script>
  <script>self.require = { 'vs/nls': { availableLanguages: { '*': 'zh-cn' } } };</script>
  <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.21.3/min/vs/loader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.21.3/min/vs/editor/editor.main.nls.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.21.3/min/vs/editor/editor.main.nls.zh-cn.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.21.3/min/vs/editor/editor.main.js"></script>

These are my code above which cause error in console: Uncaught SyntaxError: Unexpected token '<'

alexdima commented 3 years ago

@Exrick

Two problems:

self.require is overwritten in the second script tag, so the two configuration options had to be merged
editor.main.nls.js which contains the English strings no longer needs to be loaded

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.21.3/min/vs/editor/editor.main.css" />
    </head>
    <body>
        <h2>Monaco Editor Localization Sample</h2>
        <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
        <script>
            self.require = {
                paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.21.3/min/vs' },
                'vs/nls': { availableLanguages: { '*': 'zh-cn' } }
            };
        </script>
        <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.21.3/min/vs/loader.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.21.3/min/vs/editor/editor.main.nls.zh-cn.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.21.3/min/vs/editor/editor.main.js"></script>
        <script>
            monaco.editor.create(document.getElementById('container'), {
                value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
                language: 'javascript'
            });
        </script>
    </body>
</html>

Exrick commented 3 years ago

Thanks a lot! Love you!

microsoft / monaco-editor

How to use localization in CDN #2320