BlazorMonaco ดาวน์โหลด - ดาวน์โหลดซอร์สโค้ด BlazorMonaco

BlazorMonaco

ทรัพยากรอื่นๆ

v3.3.0

ดาวน์โหลด

Blazormonaco

ส่วนประกอบ Blazor สำหรับ Microsoft Monaco Editor ซึ่งให้อำนาจรหัสสตูดิโอ Visual

ชุดคุณสมบัติ Monaco Editor หลักส่วนใหญ่รองรับด้วยคุณสมบัติที่ใช้น้อยกว่าในปัจจุบันขาดหายไปในปัจจุบัน การมีส่วนร่วมความคิดเห็นหรือข้อเสนอแนะใด ๆ ยินดีต้อนรับอย่างมาก โปรดติดต่อฉันที่ 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
```
เพิ่มแท็กสคริปต์ด้านล่างไปยังจุดสิ้นสุดของแท็ก Body 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 >
```
ทุกอย่างอยู่ในสามเนมสเปซ คุณสามารถเพิ่มสิ่งต่อไปนี้โดยใช้คำสั่งไปยังรูท _Imports.razor ไฟล์หรือสถานที่อื่น ๆ ที่คุณอาจต้องการ
```
 @ using BlazorMonaco
@ using BlazorMonaco . Editor
@ using BlazorMonaco . Languages
```
เพิ่ม StandaloneCodeEditor หรือส่วนประกอบ StandaloneDiffEditor ในไฟล์มีดโกนของคุณและคุณจะเห็นตัวแก้ไขที่แสดงพร้อมตัวเลือกเริ่มต้น
```
< StandaloneCodeEditor />

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

ฟังกิจกรรมบรรณาธิการ

คุณสามารถสมัครสมาชิก Editor Events (เช่น OnDidKeyUp หรือ OnDidPaste ) ผ่านพารามิเตอร์เหตุการณ์ตัวแก้ไข

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

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

การเข้าถึงบรรณาธิการและกิจกรรมภายในของ Editor

StandaloneDiffEditor มีคุณสมบัติสองประการที่มีชื่อว่า OriginalEditor และ ModifiedEditor สำหรับการเข้าถึงอินสแตนซ์ของตัวแก้ไขภายใน คุณสามารถใช้พวกเขาเช่นอินสแตนซ์อื่น ๆ StandaloneCodeEditor

คุณสามารถลงทะเบียนไปยังกิจกรรมของ Editors ภายในโดยใช้พารามิเตอร์เหตุการณ์ผู้ช่วยของอินสแตนซ์หลัก 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

มีตัวเลือก CSS 3 ตัวที่คุณสามารถใช้ในการปรับแต่งสไตล์ CSS สำหรับบรรณาธิการของคุณ

อินสแตนซ์ของบรรณาธิการทั้งหมดมีอยู่ในองค์ประกอบ div ที่มีคลาส CSS ของ monaco-editor-container
ค่า Id ที่คุณตั้งค่าสำหรับอินสแตนซ์ของตัวแก้ไขของคุณถูกตั้งค่าเป็น ID ขององค์ประกอบคอนเทนเนอร์ div
หากคุณตั้งค่าคุณสมบัติ 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 Editor JavaScript Library กำหนดวิธีการบางอย่างในขอบเขตทั่วโลก เนื่องจาก C# ไม่อนุญาตให้ใช้วิธีการทั่วโลก Blazormonaco จัดกลุ่มวิธีการเหล่านั้นในสองคลาสคงที่ชื่อ BlazorMonaco.Editor.Global และ BlazorMonaco.Language.Global หากคุณต้องการใช้วิธีการแก้ไข Monaco ในขอบเขตทั่วโลกให้ตรวจสอบว่าในไลบรารี JavaScript นั้นเป็นอย่างไรและค้นหาในคลาส Global ที่สอดคล้องกัน

ตัวอย่างเช่นคุณสามารถใช้วิธี SetTheme ได้เช่นด้านล่าง

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

ใช้การติดตั้งตัวแก้ไขโมนาโกแบบกำหนดเอง

หากคุณทำการเปลี่ยนแปลงไลบรารี JS Editor Monaco และจำเป็นต้องใช้เวอร์ชันที่แก้ไขนี้แทนเวอร์ชันที่ไม่ได้แก้ไขที่ฝังอยู่ใน 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 ของฉัน
ตอบ: เพื่อให้สามารถทำงานร่วมกับห้องสมุด JS MonacoEditor แบบอินเทอร์แอคทีฟ, Blazormonaco ต้องใช้โหมดเรนเดอร์แบบโต้ตอบ หากคุณวางอินสแตนซ์ของตัวแก้ไขไว้ในหน้าเว็บที่ใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์แบบคงที่ (SSR แบบคงที่) อินสแตนซ์ของตัวแก้ไขไม่สามารถเริ่มต้นและทำงานได้
คุณสามารถตั้งค่าโหมดเรนเดอร์แบบโต้ตอบทั่วโลกในระดับแอพ
```
 
< Routes @rendermode = " InteractiveServer " />
```
สำหรับหน้าเฉพาะเท่านั้น
```
 
@page " /editor-page "
@rendermode InteractiveServer

< StandaloneCodeEditor />
```
หรือเฉพาะส่วนประกอบที่ห่ออินสแตนซ์ของตัวแก้ไข
```
 
@rendermode InteractiveServer

< StandaloneCodeEditor />
```
ถาม: บรรณาธิการทำงานได้ดีในครั้งแรกที่ปรากฏขึ้น แต่มันก็เสีย (ราวกับว่าสไตล์ CSS ไม่ถูกต้อง) หากผู้ใช้นำทางไปยังหน้าอื่นและกลับไปที่หน้าของบรรณาธิการ
ตอบ: โปรดตรวจสอบว่าหน้าเว็บที่มีอินสแตนซ์ของตัวแก้ไขไม่ได้เปิดด้วยการนำทางที่ปรับปรุงแล้วของ Blazor การปรับปรุงการเปลี่ยนแปลงแบบไดนามิกที่ได้รับการปรับปรุงให้กับ DOM โดย MonacoEditor JS Library และทำลายตัวแก้ไข คุณต้องปิดใช้งานการนำทางที่ได้รับการปรับปรุงสำหรับหน้าเว็บที่มีตัวแก้ไข
คุณสามารถตั้งค่าแอตทริบิวต์ data-enhance-nav ของลิงก์ของคุณเป็น false
```
 < a href =" editor-page " data-enhance-nav =" false " > Editor Page </ a >
```
ตั้งค่าพารามิเตอร์ forceLoad ในการเรียก NavigateTo() ของคุณเป็น TRUE
```
 Navigation . NavigateTo ( "editor-page" , true ) ;
```
หรือใช้เอกสาร Blazor ที่นี่เพื่อดูวิธีการทั้งหมดเพื่อปิดการใช้งานการนำทางที่ได้รับการปรับปรุง