BlazorMonaco
v3.3.0
Visual Studio Code에 전원을 공급하는 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 면도기 파일에 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 Instances에 액세스하기 위해 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 );
}
}
편집자의 CSS 스타일을 사용자 정의하는 데 사용할 수있는 3 개의 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 ;
} Monaco 편집자 JavaScript Library는 글로벌 범위의 일부 방법을 정의합니다. C#은 글로벌 방법을 허용하지 않기 때문에 Blazormonaco는 BlazorMonaco.Editor.Global 및 BlazorMonaco.Language.Global 이라는 두 가지 정적 클래스로 이러한 방법을 그룹화합니다. 글로벌 범위에서 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 웹 앱에서 올바르게 초기화되지 않습니다.
A : 대화식 Monacoeditor JS 라이브러리에서 작업 할 수 있으려면 Blazormonaco는 대화식 렌더링 모드가 필요합니다. 정적 서버 측 렌더링 (STATIC 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 : 편집자는 처음 표시 될 때 OK 작동합니다. 그러나 사용자가 다른 페이지로 탐색하여 편집기 페이지로 돌아 오면 (CSS 스타일이 잘못된 것처럼) 고장납니다.
A : 편집기 인스턴스가 포함 된 페이지가 Blazor Enhanced Navigation으로 열리지 않은지 확인하십시오. 향상된 내비게이션 Monacoeditor JS 라이브러리에 의해 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 편집기 문서를 사용할 수 있습니다.
주요 버전 업데이트 ( v2.x 에서 v3.x 등) 후에는 통합을 변경해야 할 수도 있습니다. 자세한 내용은 Migrate.md 파일을 참조하십시오.
changelog.md 파일의 역사와 변경 사항을 볼 수 있습니다.
MIT, 자세한 내용은 라이센스 파일을 참조하십시오.
