BlazorMonaco Download - BlazorMonaco Quellcode Download

BlazorMonaco

Andere Ressourcen

v3.3.0

Herunterladen

Blazormonaco

Blazor -Komponente für Microsoft Monaco Editor, der Visual Studio Code macht.

Der größte Teil des Hauptfunktionssatzes für Monaco-Editor wird mit einigen derzeit weniger fehlenden Funktionen unterstützt. Beiträge, Kommentare oder Vorschläge sind sehr willkommen. Bitte kontaktieren Sie mich unter x.com/serdarciplak oder über GitHub.

Die aktuelle Blazormonaco -Version:

Verwendet Monaco Editor v0.52.2
Unterstützt netstandard2.0 , net5.0 , net6.0 , net7.0 , net8.0 und net9.0

Demo

Sie können hier eine funktionierende WebAssembly -App sehen.

Installation

Fügen Sie das Nuget -Paket Ihrem Blazor -Projekt hinzu.

 dotnet add package BlazorMonaco
// or
Install-Package BlazorMonaco

Fügen Sie die folgenden Skript -Tags zum Ende Ihres HTML -Body -Tags hinzu. Beachten Sie, dass sie vor dem Blazor -Skript -Tag platziert werden müssen ( blazor.webassembly.js , blazor.server.js oder 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 >

Alles liegt in drei Namespaces. Sie können die folgenden Anweisungen zu Ihrer Root _Imports.razor -Datei oder an einem anderen Ort hinzufügen, den Sie möglicherweise benötigen.
```
 @ using BlazorMonaco
@ using BlazorMonaco . Editor
@ using BlazorMonaco . Languages
```
Fügen Sie einen StandaloneCodeEditor oder eine StandaloneDiffEditor -Komponente in Ihre Rasierdatei hinzu, und Sie werden sehen, wie der Editor mit den Standardoptionen gerendert wird.
```
< StandaloneCodeEditor />

< StandaloneDiffEditor />
```

Hinweis: Wenn Sie Probleme haben, wie der Editor nicht sichtbar ist oder nicht korrekt initialisiert, überprüfen Sie bitte den Abschnitt Fehlerbehebung unten.

Verwendung

Erstoptionen bereitstellen

Um die ersten Optionen Ihres Editors anzupassen, setzen Sie den ConstructionOptions fest und geben Sie eine Methode an, die eine StandaloneEditorConstructionOptions zurückgibt.

< 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 " +
                    " } "
        };
    }
}

Anhören von Editor -Ereignissen

Sie können Editor -Events (z. B. OnDidKeyUp oder OnDidPaste ) über die Editor -Event -Parameter abonnieren.

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

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

Zugriff auf die inneren Redakteure und Veranstaltungen eines Diff -Editors

StandaloneDiffEditor stellt zwei imagsinen Immobilien mit dem Namen OriginalEditor und ModifiedEditor für den Zugriff auf die Instanzen der inneren Redakteur an. Sie können sie wie jede andere StandaloneCodeEditor -Instanz verwenden.

Sie können sich bei den Ereignissen der inneren Redakteure anhand der Helfer -Ereignisparameter der Hauptinstanz der Hauptinstanz StandaloneDiffEditor registrieren.

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

Es gibt 3 CSS -Selektoren, mit denen Sie die CSS -Stile für Ihre Redakteure anpassen können.

Alle Herausgeber-Instanzen sind in einem div Element enthalten, das eine CSS-Klasse von monaco-editor-container hat.
Der Id -Wert, den Sie für Ihre Editorinstanz festgelegt haben, wird ebenfalls als ID seines Container div -Elements festgelegt.
Wenn Sie CssClass -Eigenschaft Ihres Editors festlegen, wird dieser Wert dem Klassenattribut seines Container -Div -Elements hinzugefügt.

Das heißt, die Rasiermesserkomponente unten;

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

wird mit der HTML unten gerendert;

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

Sie können also CSS -Selektoren wie unten verwenden, um jedes Element in einem Editor auszuwählen und sein Styling anzupassen.

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

Globale Methoden

Die Monaco -Editor JavaScript Library definiert einige Methoden im globalen Bereich. BlazorMonaco.Language.Global C# keine globalen Methoden zulässt, gruppiert Blazormonaco diese Methoden in zwei statischen Klassen namens BlazorMonaco.Editor.Global Wenn Sie eine Monaco -Editor -Methode im globalen Bereich verwenden müssen, prüfen Sie, wo in der JavaScript -Bibliothek diese Methode ist, und suchen Sie in der entsprechenden Global Klasse danach.

Sie können beispielsweise die SetTheme -Methode wie unten verwenden.

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

Verwenden einer benutzerdefinierten Monaco -Editor -Installation

Wenn Sie Änderungen an der Monaco -Editor JS Library vorgenommen haben und diese bearbeitete Version anstelle der in Blazormonaco eingebetteten nicht modifizierten Version verwenden müssen, können Sie die Skript -Tags wie unten ändern.

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

Fehlerbehebung

F: Ich habe wie oben beschrieben einen StandaloneCodeEditor hinzugefügt, aber es wird nicht geladen.
A: Vor allem wird der Editor tatsächlich geladen, aber Sie können es nicht sehen, da er eine Höhe von 0 hat. Wie die Höhe eines DOM -Elements festgelegt werden kann, hängt von seinen übergeordneten Elementen und ihrem Styling ab. Blazormonaco kann also die Höhe der Redakteurinstanzen intern nicht verwalten. Wenn Sie die Größe eines Redakteurs nicht festlegen, ist es möglicherweise unsichtbar, da er eine Höhe von 0px hat. Bitte fügen Sie einen CSS -Stil hinzu, um die Höhe Ihres Editors zu setzen, je nachdem, wo er platziert ist.
```
 # my-editor-id {
    height : 100 px ;
}
```
F: Der Editor initialisiert in meiner Blazor -Web -App nicht korrekt.
A: Um mit der interaktiven Monacoeditor JS -Bibliothek arbeiten zu können, benötigt Blazormonaco einen interaktiven Rendermodus. Wenn Sie die Editor-Instanz in einer Seite platzieren, die das statische Server-Side-Rendering (SSR) verwendet, kann die Editorinstanz nicht initialisieren und funktionieren.
Sie können einen interaktiven Rendermodus weltweit auf App -Ebene festlegen.
```
 
< Routes @rendermode = " InteractiveServer " />
```
Nur für eine bestimmte Seite,
```
 
@page " /editor-page "
@rendermode InteractiveServer

< StandaloneCodeEditor />
```
oder nur für eine Komponente, die die Editorinstanz umhüllt.
```
 
@rendermode InteractiveServer

< StandaloneCodeEditor />
```
F: Der Editor arbeitet beim ersten Mal in Ordnung. Aber es ist kaputt (als ob sein CSS -Stil falsch ist), wenn der Benutzer zu einer anderen Seite navigiert und zur Seite des Editors zurückkehrt.
A: Bitte überprüfen Sie, ob die Seite, die die Editor -Instanz enthält, nicht mit Blazor Enhanced Navigation geöffnet wird. Verbesserte Navigation undos dynamische Änderungen, die von Monacoeditor JS Library an den DOM vorgenommen wurden, und den Herausgeber bricht. Sie müssen die erweiterte Navigation für Seiten deaktivieren, die einen Editor enthalten.
Sie können das Attribut data-enhance-nav Ihrer Links zu false festlegen,
```
 < a href =" editor-page " data-enhance-nav =" false " > Editor Page </ a >
```
Setzen Sie den Parameter forceLoad in Ihren NavigateTo() -Anrufen auf true.
```
 Navigation . NavigateTo ( "editor-page" , true ) ;
```
Oder verwenden Sie hier die Blazor -Dokumente, um alle Methoden zur Deaktivierung der verbesserten Navigation anzuzeigen.

Dokumentation

Da Blazormonaco nur eine Brücke zwischen JavaScript und Blazor ist, können Sie die Dokumentation des Monaco Editors verwenden.

Migrationsleitfaden

Nach einem Major -Versions -Update (wie von v2.x bis v3.x ) müssen Sie möglicherweise einige Änderungen in Ihrer Integration vornehmen. Weitere Informationen finden Sie in der Datei migrate.md -Datei.