BlazorMonaco
v3.3.0
Microsoft Monaco編輯器的Blazor組件，該編輯為Visual Studio代碼提供動力。
大多數主要的摩納哥編輯器功能集都受到了當前缺少的一些頻繁使用的功能。非常歡迎任何貢獻，評論或建議。請隨時通過X.com/serdarciplak或通過Github與我聯繫。
當前的Blazormonaco版本：
Monaco Editor v0.52.2netstandard2.0 ， net5.0 ， net6.0 ， net7.0 ， net8.0和net9.0 您可以在此處看到一個有效的示例WebAssembly應用程序。
將Nuget軟件包添加到您的大火項目中。
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 >一切都位於三個名稱空間中。您可以將以下指令添加到root _Imports.razor文件或您可能需要的任何其他地方。
@ using BlazorMonaco
@ using BlazorMonaco . Editor
@ using BlazorMonaco . Languages在剃須刀文件中添加一個StandaloneCodeEditor或StandaloneDiffEditor組件，您會看到編輯器呈現的默認選項。
< StandaloneCodeEditor />
<!-- or -->
< StandaloneDiffEditor />注意：如果您有任何問題，例如編輯器不可見或未正確初始化，請檢查下面的故障排除部分。
要自定義編輯器的初始選項，請設置ConstructionOptions參數，並提供一種返回StandaloneEditorConstructionOptions eDitorConstructionOptions的方法。
< 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提供了兩個名為OriginalEditor的屬性和用於訪問內部編輯器實例的ModifiedEditor 。您可以像其他任何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 );
}
}
您可以使用3個CSS選擇器為編輯器定制CSS樣式。
monaco-editor-container的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 ;
}摩納哥編輯JavaScript庫定義了全局範圍中的一些方法。由於C＃不允許全局方法，因此Blazormonaco將這些方法分為兩個靜態類，名為BlazorMonaco.Editor.Global和BlazorMonaco.Language.Global 。如果您需要在全局範圍中使用摩納哥編輯器方法，請檢查該方法所在的JavaScript庫中的位置，然後在相應的Global類中搜索它。
例如，您可以使用以下類似的SetTheme方法。
await BlazorMonaco . Editor . Global . SetTheme ( jsRuntime , "my-custom-theme" ) ;如果您對摩納哥編輯JS庫進行了更改，並且需要使用此編輯版本而不是嵌入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 > 問：如上所述，我添加了一個StandaloneCodeEditor ，但沒有加載。
答：最有可能的是，編輯器實際上是在加載，但是您看不到它，因為它的高度為0。如何設置DOM元素的高度取決於其父元素及其樣式。因此，Blazormonaco無法在內部管理編輯器實例的高度。如果您不設置編輯器的高度，則可能是看不見的，因為它的高度為0px 。請添加CSS樣式以根據放置位置設置編輯器的高度。
# my-editor-id {
height : 100 px ;
}問：編輯器無法在我的Blazor Web應用程序中正確初始化。
答：要與Interactive Monacoditor 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 />問：第一次顯示編輯器時，編輯器正常運行。但是，如果用戶導航到另一個頁面並返回編輯器頁面，則它被打破了（好像其CSS樣式不正確）。
答：請檢查包含編輯器實例的頁面是否沒有使用Enhasged Navigation打開。增強的導航撤離器動態變化由Monacoeditor JS庫對DOM進行，並打破了編輯器。您需要禁用包含編輯器的頁面的增強導航。
您可以將鏈接的data-enhance-nav屬性設置為false ，
< a href =" editor-page " data-enhance-nav =" false " > Editor Page </ a >在您的NavigateTo()呼叫中設置forceLoad參數為true，
Navigation . NavigateTo ( "editor-page" , true ) ;或在此處使用大發文檔查看所有用於禁用增強導航的方法。
由於Blazormonaco只是JavaScript和Blazor之間的橋樑，因此您可以使用摩納哥編輯的文檔。
在重大版本更新（例如從v2.x到v3.x ）之後，您可能需要對集成進行一些更改。有關詳細信息，請參閱遷移。 md文件。
您可以查看ChangElog.md文件中的歷史記錄和更改。
麻省理工學院，有關詳細信息，請參見許可證文件。
