monaco-editor: ブラウザベースのコード editor_html/css_WEB-ITnose-htmlチュートリアル-php.cn

monaco-editor-core:Issues -- npm モジュール (エディタ自体の問題)
monaco-typescript:Issues -- npm モジュール (JavaScript または TypeScript 言語サポートの問題)
monaco-langages:問題 -- npm モジュール (bat、coffee script、cpp、csharp、fsharp、go、ini、jade、lua、objective-c、powershell、python、r、ruby、sql、swift、vb、または xml の問題)

既知の問題

IE では、エディターを body 要素で完全に囲む必要があります。そうしないと、マウス操作に対して行うヒットテストが機能しません。 F12 を使用して body 要素をクリックしてこれを検査し、エディターを囲んでいることを視覚的に確認できます。

npm install monaco-editor

ログイン後にコピー

をインストール中

次の内容が得られます:

開発バージョンに対して開発し、運用環境では最小バージョンを使用することをお勧めします。

統合

これは、エディターを埋め込む最も基本的な HTML ページです。より多くのサンプルは monaco-editor-sample で入手できます。

<!DOCTYPE html><html><head>    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></head><body><div id="container" style="width:800px;height:600px;border:1px solid grey"></div><script src="monaco-editor/min/vs/loader.js"></script><script>    require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});    require(['vs/editor/editor.main'], function() {        var editor = monaco.editor.create(document.getElementById('container'), {            value: [                'function x() {',                '\tconsole.log("Hello world!");',                '}'            ].join('\n'),            language: 'javascript'        });    });</script></body></html>

ログイン後にコピー

クロスドメインの統合

HTML とは異なるドメイン (CDN など) で .js をホストしている場合は、Monaco Editor がスマート言語機能用の Web ワーカーを作成することを知っておく必要があります。クロスドメイン Web ワーカーは許可されていませんが、Web ワーカーのロードをプロキシして動作させる方法は次のとおりです:

<!--    Assuming the HTML lives on www.mydomain.com and that the editor is hosted on www.mycdn.com--><script type="text/javascript" src="http://www.mycdn.com/monaco-editor/min/vs/loader.js"></script><script>    require.config({ paths: { 'vs': 'http://www.mycdn.com/monaco-editor/min/vs' }});    // Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites    // the default worker url location (used when creating WebWorkers). The problem here is that    // HTML5 does not allow cross-domain web workers, so we need to proxy the instantion of    // a web worker through a same-domain script    window.MonacoEnvironment = {        getWorkerUrl: function(workerId, label) {            return 'monaco-editor-worker-loader-proxy.js';        }    };    require(["vs/editor/editor.main"], function () {        // ...    });</script><!--    Create http://www.mydomain.com/monaco-editor-worker-loader-proxy.js with the following content:        self.MonacoEnvironment = {            baseUrl: 'http://www.mycdn.com/monaco-editor/min/'        };        importScripts('www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');    That's it. You're good to go! :)-->

ログイン後にコピー

Documentation

monaco.d.ts で説明されている API に対してプログラミングしてください。

ここで実際のエディターをご覧ください。

ここで完全な HTML サンプルを見つけてください。

ここで API サンプルをご覧ください。

ここで Monarch トークナイザーを作成します。

FAQ

Q: VS Code と Monaco Editor の関係は何ですか?

A: Monaco Editor は、コードが Web で実行するために必要なサービスの周りにいくつかの shim を使用して、VS Code のソースから直接生成されます。

Q: VS Code のバージョンと Monaco Editor のバージョンの間にはどのような関係がありますか?

A: なし。 Monaco Editor はライブラリであり、ソースコードを直接反映します。

Q: VS Code の拡張機能を作成しましたが、ブラウザーの Monaco Editor で動作しますか?

A: いいえ

Q: なぜこれらの Web ワーカーが存在するのでしょうか?また、なぜ私が気にする必要があるのでしょうか?

A: 言語サービスは、UI スレッドの外側で重いものを計算するために Web ワーカーを作成します。リソースのオーバーヘッドという点ではほとんどコストがかからず、機能させる限り、あまり心配する必要はありません (上記のクロスドメインの場合を参照)。

Q: このloader.js とは何ですか? ? require.jsを使用できますか?

A: VS Code で使用する AMD ローダーです。はい

開発

チートシート

npm run simpleserver を使用した simpleserver
npm run リリースを使用したリリース
npm run を使用した Web サイト

ソースから monaco-editor-core を実行する

クローン https://github.コム$/src/vscode/ の /Microsoft/vscode (このリポジトリの隣)
$/src/vscode> を実行します。 gulp watch
run $/src/monaco-editor> npm run simpleserver
$/src/monaco-editor/test/index.html を編集し、var RUN_EDITOR_FROM_SOURCE = true; に設定します。
http://localhost:8080/monaco-editor/test/

ソースからプラグイン (例: monaco-typescript) を実行する

$ で https://github.com/Microsoft/monaco-typescript をクローンします/src/monaco-typescript (このリポジトリの隣)
$/src/monaco-typescript> を実行します。 npm run watch
run $/src/monaco-editor> npm run simpleserver
$/src/monaco-editor/test/index.html を編集し、 RUN_PLUGINS_FROM_SOURCE['monaco-typescript'] = true; に設定します。
http://localhost:8080/monaco-editor/test/

新しい monaco-editor バージョンを出荷する

新しい monaco-editor-core バージョンを出荷する (必要な場合)

バンプバージョンを https: //github.com/Microsoft/vscode/blob/master/build/monaco/package.json
- API の重大な変更がある場合は、メジャー (または 0.x.y のマイナー) をバンプします
すべてローカルにプッシュしますリモートへの変更
npm package $/src/vscode> を生成します。 gulp editor-distro
npm パッケージを公開 $/src/vscode/out-monaco-editor-core> npm public

プラグインに新しい monaco-editor-core を採用する (必要な場合)

https://github.com/Microsoft/monaco-typescript
https://github.com/Microsoft/monaco-langages

新しい monaco-editor-core を採用します

$/src/monaco-editor/package.json を編集し、(必要に応じて) バージョンを更新します:
- monaco-editor-core
- monaco-typescript
- monaco-言語
$/src/monaco-editor/package.json のバージョンを更新します
- monaco-editor-core と同様に保つように努めますが、パッチのバージョンを変えるだけかもしれません。
$/src/monaco-editor> を実行して最新の DEPS を取得します。 npm インストール。