Unduh BlazorMonaco - Unduh Kode Sumber BlazorMonaco

BlazorMonaco

Sumber daya lainnya

v3.3.0

Unduh

Blazormonaco

Komponen Blazor untuk Microsoft Monaco Editor yang Powers Visual Studio Code.

Sebagian besar set fitur editor Monako utama didukung dengan beberapa fitur yang kurang digunakan saat ini hilang. Setiap kontribusi, komentar, atau saran sangat disambut. Silakan hubungi saya di x.com/serdarciplak atau melalui GitHub.

Versi Blazormonaco saat ini:

Menggunakan Monaco Editor v0.52.2
Mendukung netstandard2.0 , net5.0 , net6.0 , net7.0 , net8.0 dan net9.0

Demo

Anda dapat melihat aplikasi sampel WebSembly yang berfungsi di sini.

Instalasi

Tambahkan paket Nuget ke proyek Blazor Anda.

 dotnet add package BlazorMonaco
// or
Install-Package BlazorMonaco

Tambahkan tag skrip di bawah ini ke akhir tag tubuh HTML Anda. Perhatikan bahwa mereka harus ditempatkan di hadapan tag skrip Blazor ( blazor.webassembly.js , blazor.server.js atau 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 >

Semuanya berada di tiga namespaces. Anda dapat menambahkan arahan menggunakan berikut ke file root _Imports.razor Anda, atau tempat lain yang mungkin Anda perlukan.
```
 @ using BlazorMonaco
@ using BlazorMonaco . Editor
@ using BlazorMonaco . Languages
```
Tambahkan StandaloneCodeEditor atau komponen StandaloneDiffEditor dalam file pisau cukur Anda dan Anda akan melihat editor yang diberikan dengan opsi default.
```
< StandaloneCodeEditor />

< StandaloneDiffEditor />
```

Catatan: Jika Anda memiliki masalah seperti editor yang tidak terlihat atau tidak menginisialisasi dengan benar, silakan periksa bagian pemecahan masalah di bawah ini.

Penggunaan

Memberikan opsi awal

Untuk menyesuaikan opsi awal editor Anda, atur parameter ConstructionOptions dan berikan metode yang mengembalikan 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 " +
                    " } "
        };
    }
}

Mendengarkan Acara Editor

Anda dapat berlangganan acara editor (misalnya OnDidKeyUp atau OnDidPaste ) melalui parameter acara editor.

< StandaloneCodeEditor Id = " my-code-editor " OnDidChangeCursorPosition = " EditorDidChangeCursorPosition " />

@code {
    private void EditorDidChangeCursorPosition ( CursorPositionChangedEvent eventArgs )
    {
        Console . WriteLine ( " EditorDidChangeCursorPosition " );
    }
}

Mengakses Editor dan Acara Editor Diff

StandaloneDiffEditor menyediakan dua properti bernama OriginalEditor dan ModifiedEditor untuk mengakses instance editor dalam. Anda dapat menggunakannya seperti instance StandaloneCodeEditor lainnya.

Anda dapat mendaftar ke acara editor dalam menggunakan parameter acara helper dari instance utama 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 );
    }
}

Styling CSS

Ada 3 pemilih CSS yang dapat Anda gunakan untuk menyesuaikan gaya CSS untuk editor Anda.

Semua instance editor terkandung dalam elemen div yang memiliki kelas CSS dari monaco-editor-container .
Nilai Id yang Anda atur untuk instance editor Anda juga ditetapkan sebagai ID dari elemen div wadahnya.
Jika Anda mengatur properti CssClass editor Anda, nilai itu ditambahkan ke atribut kelas dari elemen div wadahnya.

Itu berarti, komponen pisau cukur di bawah ini;

< StandaloneCodeEditor Id = " my-editor-id " CssClass = " my-editor-class " />

diterjemahkan dengan HTML di bawah ini;

 < div id =" my-editor-id " class =" monaco-editor-container my-editor-class " >
    ...
</ div >

Jadi, Anda dapat menggunakan pemilih CSS seperti di bawah ini untuk memilih elemen apa pun dalam editor dan menyesuaikan gaya.

 # 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 ;
}

Metode global

Editor Monaco Javascript Library mendefinisikan beberapa metode dalam ruang lingkup global. Karena C# tidak mengizinkan metode global, Blazormonaco mengelompokkan metode -metode tersebut di dua kelas statis bernama BlazorMonaco.Editor.Global dan BlazorMonaco.Language.Global . Jika Anda perlu menggunakan metode editor Monako dalam ruang lingkup global, periksa di mana di pustaka JavaScript itu, dan cari di kelas Global yang sesuai.

Misalnya, Anda dapat menggunakan metode SetTheme seperti di bawah ini.

 await BlazorMonaco . Editor . Global . SetTheme ( jsRuntime , "my-custom-theme" ) ;

Menggunakan Instalasi Editor Monako Kustom

Jika Anda telah membuat perubahan pada Perpustakaan Editor JS Monako, dan perlu menggunakan versi yang diedit ini alih -alih versi yang tidak dimodifikasi yang tertanam di Blazormonaco, Anda dapat memodifikasi tag skrip seperti di bawah ini.

 < 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 >

Pemecahan masalah

T: Saya telah menambahkan StandaloneCodeEditor seperti yang dijelaskan di atas, tetapi tidak memuat.
A: Kemungkinan besar, editor sebenarnya memuat tetapi Anda tidak dapat melihatnya karena memiliki ketinggian 0. Bagaimana tinggi elemen DOM dapat diatur tergantung pada elemen induknya dan gaya mereka. Jadi, Blazormonaco tidak dapat secara internal mengelola ketinggian instance editor. Jika Anda tidak menetapkan ketinggian editor, mungkin tidak terlihat karena memiliki ketinggian 0px . Harap tambahkan gaya CSS untuk mengatur tinggi editor Anda sesuai dengan tempat ditempatkan.
```
 # my-editor-id {
    height : 100 px ;
}
```
T: Editor tidak menginisialisasi dengan benar di aplikasi web Blazor saya.
A: Untuk dapat bekerja dengan Perpustakaan JS Monakoedit interaktif, Blazormonaco membutuhkan mode render interaktif. Jika Anda menempatkan instance editor di halaman yang menggunakan rendering sisi server statis (SSR statis), instance editor tidak dapat menginisialisasi dan berfungsi.
Anda dapat mengatur mode render interaktif secara global di tingkat aplikasi,
```
 
< Routes @rendermode = " InteractiveServer " />
```
hanya untuk halaman tertentu,
```
 
@page " /editor-page "
@rendermode InteractiveServer

< StandaloneCodeEditor />
```
atau hanya untuk komponen yang membungkus instance editor.
```
 
@rendermode InteractiveServer

< StandaloneCodeEditor />
```
T: Editor bekerja dengan baik saat pertama kali ditampilkan. Tapi itu rusak (seolah -olah gaya CSS -nya salah), jika pengguna menavigasi ke halaman lain dan kembali ke halaman editor.
A: Silakan periksa bahwa halaman yang berisi instance editor tidak dibuka dengan navigasi yang disempurnakan Blazor. Peningkatan perubahan dinamis navigasi yang dibuat untuk DOM oleh Monacoeditor JS Library dan menghancurkan editor. Anda perlu menonaktifkan navigasi yang disempurnakan untuk halaman yang berisi editor.
Anda dapat mengatur atribut data-enhance-nav dari tautan Anda ke false ,
```
 < a href =" editor-page " data-enhance-nav =" false " > Editor Page </ a >
```
Setel parameter forceLoad di NavigateTo() panggilan ke true,
```
 Navigation . NavigateTo ( "editor-page" , true ) ;
```
Atau gunakan dokumen Blazor di sini untuk melihat semua metode untuk menonaktifkan navigasi yang disempurnakan.

Dokumentasi

Karena Blazormonaco hanyalah jembatan antara Javascript dan Blazor, Anda dapat menggunakan dokumentasi editor Monako.

Panduan Migrasi

Setelah pembaruan versi utama (seperti dari v2.x ke v3.x ), Anda mungkin perlu membuat beberapa perubahan dalam integrasi Anda. Silakan lihat file migrate.md untuk detailnya.