検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >monaco-editor: ブラウザベースのコード editor_html/css_WEB-ITnose

monaco-editor: ブラウザベースのコード editor_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:14:574052ブラウズ

Monaco Editor

Monaco Editor は、VS Code を強化するコード エディターです。コード エディターの機能を説明する優れたページは、ここにあります。

問題

問題を作成するときは、エディタのバージョンと問題が発生しているブラウザについて言及してください。

このリポジトリには、物事を結び付けるためのスクリプトのみが含まれています。ソースが存在する実際のリポジトリに対して問題を作成してください。コードの寿命:

  • 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
をインストール中

次の内容が得られます:

    inside dev : バンドルされ、縮小されていません
    • inside min : バンドルされ、縮小されています
    • min-maps 内: min のソースマップ
    • monaco.d.ts : これはエディターの API を指定します (これが実際にバージョン管理されているもので、その他はすべてプライベートとみなされ、リリースによって壊れる可能性があります)。
開発バージョンに対して開発し、運用環境では最小バージョンを使用することをお勧めします。

統合

これは、エディターを埋め込む最も基本的な 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 インストール 。

パッケージ monaco-editor

  • $/src/monaco-editor> を実行します。 npm run release

パッケージ化されたビットを試してみる

  • open http://localhost:8080/monaco-editor/test/index-release.html
  • open http://localhost:8080/monaco-editor/test/スモークテスト-リリース.html

パッケージ化されたビットを公開する

  • $/src/monaco-editor/release> を実行します。 npm public

ソースから Web サイトを実行する

  • run $/src/monaco-editor> npm run release
  • open http://localhost:8080/monaco-editor/website/

プレイグラウンドサンプルの生成

  • edi​​t $/src/monaco-editor/website/playground/playground.mdoc
  • run $ /src/monaco-editor>遊び場のサンプルを飲み込む

ウェブサイトを公開する

  • $/src/monaco-editor> を実行します。 npm run website
  • gh-pages ブランチを強制プッシュします: $/src/monaco-editor-website> git Push Origin gh-pages --force

License

MIT

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：シンプルな仮想 DOM 実装を最初から段階的に作成する 2: Props&Event処理_html/css_WEB-ITnose次の記事：シンプルな仮想 DOM 実装を最初から段階的に作成する 2: Props&Event処理_html/css_WEB-ITnose

関連記事

続きを見る