BlazorMonaco
v3.3.0
Visual Studioコードを強化するMicrosoft Monacoエディター用のBlazorコンポーネント。
メインのMonacoエディター機能セットのほとんどは、現在欠落している頻度の低い機能でサポートされています。貢献、コメント、または提案は大歓迎です。 x.com/serdarciplakまたはGithub経由でお気軽にお問い合わせください。
現在のBlazormonacoバージョン：
Monaco Editor v0.52.2を使用しますnetstandard2.0 、 net5.0 、 net6.0 、 net7.0 、 net8.0 、 net9.0をサポートしています動作するサンプルWebAssemblyアプリはこちらをご覧ください。
NugetパッケージをBlazorプロジェクトに追加します。
dotnet add package BlazorMonaco
// or
Install-Package BlazorMonaco
以下のスクリプトタグをHTMLボディタグの最後に追加します。それらは、Blazorスクリプトタグ（ blazor.webassembly.js 、 blazor.server.jsまたはblazor.web.js ）の前に配置する必要があることに注意してください。
< script src =" _content/BlazorMonaco/jsInterop.js " > </ script >
< script src =" _content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js " > </ script >
< script src =" _content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js " > </ script >すべてが3つの名前空間にあります。ルート_Imports.razorファイル、または必要な他の場所にディレクティブを使用して以下を追加できます。
@ using BlazorMonaco
@ using BlazorMonaco . Editor
@ using BlazorMonaco . Languages RazorファイルにStandaloneCodeEditorまたはStandaloneDiffEditorコンポーネントを追加すると、デフォルトのオプションがレンダリングされているエディターが表示されます。
< StandaloneCodeEditor />
<!-- or -->
< StandaloneDiffEditor />注：編集者が表示されていないか、正しく初期化されていないなどの問題がある場合は、以下のトラブルシューティングセクションを確認してください。
エディターの初期オプションをカスタマイズするには、 ConstructionOptionsパラメーターを設定し、 StandaloneEditorConstructionOptionsを返すメソッドを提供します。
< StandaloneCodeEditor Id = " my-code-editor " ConstructionOptions = " EditorConstructionOptions " />
@code {
private StandaloneEditorConstructionOptions EditorConstructionOptions ( StandaloneCodeEditor editor )
{
return new StandaloneEditorConstructionOptions
{
AutomaticLayout = true ,
Language = " javascript " ,
Value = " function xyz() { n " +
" console.log( " Hello world! " ); n " +
" } "
};
}
}エディターイベントパラメーターを使用して、エディターイベント（ OnDidKeyUpまたはOnDidPasteなど）を購読できます。
< StandaloneCodeEditor Id = " my-code-editor " OnDidChangeCursorPosition = " EditorDidChangeCursorPosition " />
@code {
private void EditorDidChangeCursorPosition ( CursorPositionChangedEvent eventArgs )
{
Console . WriteLine ( " EditorDidChangeCursorPosition " );
}
}StandaloneDiffEditor 、Inner EditorインスタンスにアクセスするためのOriginalEditorとModifiedEditorという名前の2つのプロパティを提供します。他のStandaloneCodeEditorインスタンスと同様に、それらを使用できます。
メインStandaloneDiffEditorインスタンスのヘルパーイベントパラメーターを使用して、内側の編集者のイベントに登録できます。
< StandaloneDiffEditor @ref = " _diffEditor " Id = " my-diff-editor " OnKeyUpOriginal = " OnKeyUpOriginal " OnKeyUpModified = " OnKeyUpModified " />
@code {
private StandaloneDiffEditor _diffEditor ;
private void OnKeyUpOriginal ( KeyboardEvent keyboardEvent )
{
StandaloneCodeEditor originalEditor = _diffEditor . OriginalEditor ;
Console . WriteLine ( " OnKeyUpOriginal : " + keyboardEvent . Code );
}
private void OnKeyUpModified ( KeyboardEvent keyboardEvent )
{
StandaloneCodeEditor modifiedEditor = _diffEditor . ModifiedEditor ;
Console . WriteLine ( " OnKeyUpModified : " + keyboardEvent . Code );
}
}
編集者のCSSスタイルをカスタマイズするために使用できる3つのCSSセレクターがあります。
monaco-editor-containerのCSSクラスを備えたdiv要素に含まれています。Id値も、コンテナdiv要素のIDとして設定されています。CssClassプロパティを設定すると、その値はコンテナDIV要素のクラス属性に追加されます。つまり、以下のかみそりコンポーネントがあります。
< StandaloneCodeEditor Id = " my-editor-id " CssClass = " my-editor-class " />以下のHTMLでレンダリングされています。
< div id =" my-editor-id " class =" monaco-editor-container my-editor-class " >
...
</ div >そのため、以下のようなCSSセレクターを使用して、エディターの要素を選択し、スタイリングをカスタマイズできます。
# my-editor-id { /* applies to a specific editor instance */
height : 100 px ;
}
. my-editor-class { /* applies to all editor instances with this class */
height : 100 px ;
}
. monaco-editor-container { /* applies to all editor instances */
height : 100 px ;
}Monaco Editor JavaScript Libraryは、グローバル範囲のいくつかの方法を定義しています。 C＃はグローバルな方法を許可していないため、BlazormonacoはBlazorMonaco.Editor.GlobalとBlazorMonaco.Language.Globalという2つの静的クラスにこれらの方法をグループ化します。グローバル範囲でMonacoエディターメソッドを使用する必要がある場合は、JavaScriptライブラリのその方法がどこにあるかを確認し、対応するGlobalクラスで検索します。
たとえば、以下のようなSetTheme法を使用できます。
await BlazorMonaco . Editor . Global . SetTheme ( jsRuntime , "my-custom-theme" ) ;Monaco Editor JS Libraryに変更を加え、Blazormonacoに組み込まれている未修飾バージョンの代わりにこの編集バージョンを使用する必要がある場合は、以下のようなスクリプトタグを変更できます。
< script src =" _content/BlazorMonaco/jsInterop.js " > </ script >
< script > var require = { paths : { vs : 'my-path/monaco-editor/min/vs' } } ; </ script >
< script src =" my-path/monaco-editor/min/vs/loader.js " > </ script >
< script src =" my-path/monaco-editor/min/vs/editor/editor.main.js " > </ script > Q：上記のようにStandaloneCodeEditorを追加しましたが、ロードされていません。
A：おそらく、エディターは実際にロードしていますが、高さは0のために表示されません。DOM要素の高さを設定する方法は、親要素とスタイリングに依存します。したがって、Blazormonacoはエディターインスタンスの高さを内部的に管理することはできません。編集者の高さを設定しない場合、 0pxの高さがあるため、目に見えない場合があります。 CSSスタイルを追加して、編集者の高さを配置した場所に応じて設定してください。
# my-editor-id {
height : 100 px ;
}Q：エディターは、Blazor Webアプリでは正しく初期化されません。
A：インタラクティブなモナコエディターJSライブラリと連携できるようにするには、Blazormonacoにはインタラクティブなレンダリングモードが必要です。エディターインスタンスを静的サーバー側のレンダリング（静的SSR）を使用するページに配置すると、エディターインスタンスは初期化して動作できません。
アプリレベルでインタラクティブレンダリングモードをグローバルに設定できます。
<!-- In your App.razor file -->
< Routes @rendermode = " InteractiveServer " />特定のページのみ、
<!-- In the razor file of your page that contains the editor -->
@page " /editor-page "
@rendermode InteractiveServer
< StandaloneCodeEditor />または、エディターインスタンスをラップするコンポーネントのみ。
<!-- In the razor file of your interactive wrapper component -->
@rendermode InteractiveServer
< StandaloneCodeEditor />Q：編集者は、初めて表示されたときに動作します。しかし、ユーザーが別のページに移動してエディターのページに戻ると、それは壊れています（まるでCSSスタイルが間違っているかのように）。
A：エディターインスタンスを含むページがBlazor Enhanced Navigationで開かれていないことを確認してください。拡張ナビゲーションは、Monacoeditor JS LibraryによってDOMに行われた動的な変更を元に戻し、編集者を破ります。エディターを含むページの拡張ナビゲーションを無効にする必要があります。
リンクのdata-enhance-nav属性をfalseに設定できます。
< a href =" editor-page " data-enhance-nav =" false " > Editor Page </ a > NavigateTo() trueへの呼び出しにforceLoadパラメーターを設定します。
Navigation . NavigateTo ( "editor-page" , true ) ;または、ここのBlazor Docsを使用して、強化されたナビゲーションを無効にするためのすべての方法を確認します。
BlazormonacoはJavaScriptとBlazorの間の橋にすぎないため、Monaco Editorのドキュメントを使用できます。
メジャーバージョンの更新（ v2.xからv3.xなど）の後、統合にいくつかの変更を加える必要がある場合があります。詳細については、Migrate.mdファイルを参照してください。
changelog.mdファイルの履歴と変更を表示できます。
MIT、詳細についてはライセンスファイルを参照してください。
