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文件中的历史记录和更改。
麻省理工学院，有关详细信息，请参见许可证文件。
