BlazorMarkdownEditor
Rewrite the Markdown Editor for Blazor with EasyMDE
นี่คือองค์ประกอบตัวแก้ไข Markdown สำหรับ Blazor WebAssembly และ Blazor Server ที่มี. NET8 ส่วนประกอบขึ้นอยู่กับ EasyMDE เวอร์ชัน 1.0.x เพื่อสร้างตัวแก้ไข ฉันตัดสินใจที่จะสร้างที่เก็บข้อมูลสำหรับไลบรารี JavaScript เพราะฉันต้องการควบคุมการอัปเดตและการเปลี่ยนแปลง ส่วนประกอบเป็น wrapper รอบ ๆ ไลบรารี JavaScript และเป็นส่วนประกอบของ Blazor ที่ช่วยให้คุณใช้ตัวแก้ไข Markdown ในแอปพลิเคชัน Blazor ของคุณ
สำหรับเอกสารเพิ่มเติมและช่วยเหลือองค์ประกอบนี้เยี่ยมชมโพสต์ที่ฉันสร้างขึ้นที่นี่
ลองใช้ตัวแก้ไข Markdown Online (ไม่เปิดใช้งานการอัปโหลด)
เพิ่มตัวแก้ไขลงใน _Imports.razor ของคุณ
@using PSC.Blazor.Components.MarkdownEditor
@using PSC.Blazor.Components.MarkdownEditor.EventsArgs
จากนั้นใน index.html ของคุณ host.html หรือ App.razor เพิ่มบรรทัดเหล่านั้น:
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/markdowneditor.css" rel="stylesheet" />
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/easymde.min.css" rel="stylesheet" />
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js"></script>
โปรดจำไว้ว่าจำเป็นต้องใช้ jQuery ส่วนประกอบมีสคริปต์ตัวแก้ไข Markdown ง่าย ๆ เวอร์ชัน 1.0.x ที่ดูแลด้วยตัวเองด้วย คุณสามารถเพิ่มสคริปต์นี้ในโครงการของคุณ แต่ถ้าคุณใช้สคริปต์ในส่วนประกอบคุณมั่นใจว่ามันทำงานได้ดีและการทดสอบฟังก์ชันทั้งหมดจะถูกทดสอบ
CSS markdowneditor.css มีสไตล์สำหรับแท็กใหม่ที่ฉันเพิ่มในตัวแก้ไข Markdown เช่น att , note , tip , warn และ video
ในหน้า Razor เราสามารถเพิ่มส่วนประกอบด้วยบรรทัดเหล่านี้
<div class="col-md-12">
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged" />
<hr />
<h3>Result</h3>
@((MarkupString)markdownHtml)
</div>
@code {
string markdownValue = "#Markdown EditornThis is a test";
string markdownHtml;
Task OnMarkdownValueChanged(string value)
{
return Task.CompletedTask;
}
Task OnMarkdownValueHTMLChanged(string value)
{
markdownHtml = value;
return Task.CompletedTask;
}
}
ความแตกต่างหลักระหว่าง value และ ValueHTMLChanged คือ Value ที่ส่งคืนข้อความที่เขียนในตัวแก้ไขเป็นสตริงในขณะที่ ValueHTMLChanged ส่งคืนรหัส HTML ที่แสดงผลสำหรับข้อความ ValueHTMLChanged รวมถึงรหัสสำหรับการแสดงกราฟนางเงือกในแท็ก SVG
ผลที่ได้คือตัวแก้ไข Markdown ที่ดีเช่นในภาพหน้าจอต่อไปนี้ นี่คือภาพหน้าจอจากการสาธิตในที่เก็บนี้
ในตัวแก้ไข Markdown ของคุณเพิ่มรหัสต่อไปนี้
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false"
CustomButtonClicked="@OnCustomButtonClicked">
<Toolbar>
<MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa fa-bolt" Title="Bold" />
<MarkdownToolbarButton Separator Name="Custom button"
Value="@("Hello from your custom Toolbar Button")"
Icon="fa fa-star"
Title="A Custom Button" />
<MarkdownToolbarButton Separator Name="https://github.com/erossini/BlazorMarkdownEditor"
Icon="fa fab fa-github" Title="A Custom Link" />
</Toolbar>
</MarkdownEditor>
@code {
// omitted code...
Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs)
{
Console.WriteLine("OnCustomButtonClicked -> " + eventArgs.Value);
buttonText += "OnCustomButtonClicked -> " + eventArgs.Value + "<br />";
return Task.CompletedTask;
}
}
ในแท็ก MarkdownEditor คุณเพิ่มแถบ Toolbar แท็บใหม่ที่มี MarkdownToolbarButton หนึ่งตัวขึ้นไป
MarkdownToolbarButton แต่ละครั้งสามารถมีหนึ่งใน Action เริ่มต้น (ดูตารางด้านล่าง) หรือค่าที่กำหนดเองเช่นลิงก์ไปยังเว็บไซต์ หากคุณต้องการที่จะแสดงก่อนที่ MarkdownToolbarButton เส้นแนวตั้งให้เพิ่ม Separator คุณสมบัติใน MarkdownToolbarButton
ในกรณีเดียวกันคุณต้องการรีเฟรชเนื้อหาของตัวแก้ไข Markdown หลังจากเริ่มต้นครั้งแรกเช่นเนื่องจากแอปพลิเคชันของคุณต้องอ่านค่าจาก API และต้องใช้เวลา สำหรับสิ่งนั้นคุณต้องเพิ่ม ref ไปยัง MarkdownEditor จากนั้นใช้เพื่อเรียกใช้คุณสมบัติ SetValueAsync เช่นเดียวกับในรหัสต่อไปนี้
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1" />
@code {
MarkdownEditor Markdown1;
// omitted code...
async Task ChangeText()
{
markdownValue = "Test!";
await Markdown1.SetValueAsync(markdownValue);
}
}
เพื่อเพิ่มฟังก์ชั่นเพิ่มเติมให้กับส่วนประกอบนั้นรวมถึงเวอร์ชันของ Mermaid.js 10.2.1 ที่อนุญาตให้เพิ่มไดอะแกรมที่น่าประทับใจและแผนภูมิในส่วนประกอบ markdown เช่น
ในการเพิ่มฟังก์ชั่นนี้ลงในตัวแก้ไข Markdown มันเพียงพอที่จะเพิ่มใน index.html สคริปต์นี้
< script src = "/_content/PSC.Blazor.Components.MarkdownEditor/js/mermaid.min.js" > </ script >สคริปต์จะตรวจสอบว่าไลบรารีนี้เรียกว่าหรือไม่ หากมีการเพิ่มลงในหน้าตัวแก้ไข Markdown โดยอัตโนมัติจะเพิ่มปุ่มในแถบเครื่องมือเพื่อแทรกแท็กสำหรับนางเงือก แท็กนั้นคือ
```mermaid
```
ใช้สคริปต์นี้ในส่วนประกอบ
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
หรือ CDN
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
นางเงือกเรนเดอร์จะไม่ทำงาน ข้อผิดพลาดคือ
E. retplace ไม่ใช่ฟังก์ชั่น
ดังนั้นฉันแนะนำให้อัปเกรดสคริปต์ด้วยสคริปต์ใหม่ตามที่ฉันอธิบายในย่อหน้าต่อไปนี้
การใช้ Mermaid เวอร์ชันใหม่จาก 10.9.1 ต้องเพิ่มรหัสนี้ใน index.html , host.html หรือ App.razor
<script type="module">
import mermaid
from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
ในขณะนี้ฉันกำลังพยายามหาวิธีที่จะรวมสคริปต์นี้ใน markdownEditor.js แต่ฉันไม่แน่ใจว่ามันจะใช้งานได้
### An example of the mermaid graphs
A ** Sequence diagram ** is an interaction diagram that shows how processes operate with one another and in what order .Sequencediagram Alice->> John: Hello John สบายดีไหม? John->> อลิซ: เยี่ยมมาก! Alice-) John: เจอกันใหม่!
A **Gantt chart** is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
Gantt Title A Gantt Diagram Dateformat Yyyy-MM-DD ส่วนส่วนงาน: A1, 2014-01-01, 30d งานอื่น: หลังจาก A1, 20D ส่วนงานอื่นใน SEC: 2014-01-12, 12d งานอื่น: 24D
An **entity–relationship model** (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types).
ลูกค้า erdiagram ||-o {คำสั่งซื้อ: สถานที่สั่ง ||-| {line-item: มีลูกค้า} | .. | {delivery-address: ใช้
## Add Highlight.js
This script is not included in the component but the component can detect if _Highlight.js_ is loaded. In this case, the Markdown Editor renders also the code in one of the supported languages.
To enable this function, add the script in your project and then in the `index.html` add the following lines
หากไลบรารีทั้งสองถูกโหลดใน index.html การเรนเดอร์นางเงือกจะไม่ทำงาน
ใน markdown มีแท็กที่ขาดหายไปเพื่อแสดงข้อมูลที่เป็นประโยชน์บางอย่างบนหน้าเช่นหมายเหตุไฮไลต์เคล็ดลับคำเตือนหรือข้อความความสนใจ ดังนั้นฉันจึงเพิ่มพวกเขาในตัวแก้ไข Markdown นี้ ตัวอย่างของผลลัพธ์ของการใช้งานนี้อยู่ในภาพหน้าจอต่อไปนี้
หากต้องการเพิ่มข้อความให้คลิกที่ไอคอนในแถบเครื่องมือในตัวแก้ไขหรือเพิ่มคำสั่งเหล่านั้น:
| สั่งการ | สี | คำอธิบาย |
|---|---|---|
| `` `att | สีแดง | แสดงข้อความความสนใจ |
| `` `หมายเหตุ | สีฟ้า | เพิ่มบันทึกในเอกสาร |
| `` `เคล็ดลับ | สีเขียว | แสดงข้อความเคล็ดลับ |
| `` `เตือน | ส้ม | นี่คือข้อความเตือน |
ในส่วนประกอบตัวแก้ไข Markdown มี CSS สำหรับพวกเขาที่เรียกว่า alert.css และคุณสามารถเพิ่มลงใน index.html ด้วยบรรทัดนี้หากคุณยังไม่ได้เพิ่ม markdowneditor.css
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/alert.css" rel="stylesheet" />
โดยค่าเริ่มต้นตัวแก้ไข Markdown จะบันทึกข้อความในที่เก็บข้อมูลท้องถิ่นของเบราว์เซอร์
AutoSaveEnabled เป็น True และ AutoSaveSubmitDelay ตั้งค่าได้ถึง 5000 มิลลิวินาที ซึ่งหมายความว่าข้อความจะถูกบันทึกทุก 5 วินาที
หากคุณต้องการทำความสะอาดข้อความที่บันทึกไว้คุณสามารถใช้รหัสต่อไปนี้ได้
<MarkdownEditor @bind-Value="@markdownValue" MaxHeight="300px"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1"
AutoSaveEnabled="true" />
@code {
MarkdownEditor Markdown1;
async Task DeleteStorage()
{
await Markdown1.CleanAutoSave();
}
}
ในตัวแก้ไข Markdown คุณสามารถเพิ่มวิดีโอในข้อความ วิดีโอสามารถมาจาก YouTube, Vimeo หรือผู้ให้บริการวิดีโออื่น ๆ วิดีโอจะแสดงในตัวแก้ไขและในรหัส HTML ที่แสดงผล
```video
https://www.youtube.com/shorts/JY1zFZgX6zM
```
ตัวแก้ไข Markdown สำหรับ Blazor มีคอลเลกชันของคุณสมบัติเพื่อแมปฟังก์ชันการทำงานทั้งหมดในเวอร์ชัน JavaScript ในที่เก็บนี้มี 2 โครงการ:
Index.razor ที่ฉันแสดงวิธีการใช้ส่วนประกอบกับฟังก์ชั่นพื้นฐานและ Upload.razor ที่แสดงวิธีการรับมือกับการอัปโหลดรูปภาพ ในการทดสอบการอัปโหลดโครงการ MarkdownEditorDemo.Api จะต้องเรียกใช้| ชื่อ | คำอธิบาย | พิมพ์ | ค่าเริ่มต้น |
|---|---|---|---|
| autosaveenabled | รับหรือตั้งค่าการตั้งค่าสำหรับการบันทึกอัตโนมัติ บันทึกข้อความที่เขียนและจะโหลดกลับมาในอนาคต มันจะลืมข้อความเมื่อมีการส่งแบบฟอร์มที่มีอยู่ใน แนะนำให้เลือก ID ที่ไม่ซ้ำกันสำหรับตัวแก้ไข Markdown | บูล | เท็จ |
| autosaveid | รับหรือตั้งค่าตัวระบุการบันทึกอัตโนมัติ คุณต้องตั้งค่าตัวระบุสตริงที่ไม่ซ้ำกันเพื่อให้ส่วนประกอบสามารถบันทึกอัตโนมัติ สิ่งที่แยกสิ่งนี้ออกจากอินสแตนซ์อื่น ๆ ของส่วนประกอบอื่น ๆ ในเว็บไซต์ของคุณ | สาย | ค่าเริ่มต้น |
| autosavedelay | ความล่าช้าระหว่างการบันทึกในมิลลิวินาที ค่าเริ่มต้นถึง 10,000 (10s) | int | 10,000 (10s) |
| autosavesubmitdelay | ความล่าช้าก่อนที่จะสมมติว่าการส่งแบบฟอร์มล้มเหลวและบันทึกข้อความเป็นมิลลิวินาที | int | 5000 (5s) |
| autosavetext | ข้อความสำหรับ autosave | สาย | autosaved: |
| autosavetimeformatlocale | ตั้งค่ารูปแบบสำหรับ dateTime เพื่อแสดง สำหรับข้อมูลเพิ่มเติมโปรดดูอินสแตนซ์เอกสารข้อมูล JavaScript DateTimeFormat | สาย | en-us |
| autosavetimeformatyear | กำหนดรูปแบบสำหรับปี | สาย | เป็นตัวเลข |
| autosavetimeformatmonth | กำหนดรูปแบบสำหรับเดือน | สาย | ยาว |
| autosavetimeformatday | กำหนดรูปแบบสำหรับวัน | สาย | 2 หลัก |
| autosavetimeformathour | ตั้งค่ารูปแบบสำหรับชั่วโมง | สาย | 2 หลัก |
| autosavetimeformatminute | ตั้งค่ารูปแบบสำหรับนาที | สาย | 2 หลัก |
| autodownloadfontawesome | หากตั้งค่าเป็น TRUE FORCE DOWNEADS FONT AWESED (ใช้สำหรับไอคอน) หากตั้งค่าเป็นเท็จป้องกันการดาวน์โหลด | บูล? | โมฆะ |
| ตัวละคร | ตั้งค่าคำที่จะแสดงในแถบสถานะสำหรับการนับของตัวละคร | สาย | characters: |
| custombuttonclicked | เกิดขึ้นหลังจากคลิกปุ่มแถบเครื่องมือที่กำหนดเอง | EventCallback | |
| CustomImageUpload | ตั้งค่าตัวจัดการอัพโหลดรูปภาพที่กำหนดเอง | ||
| ทิศทาง | RTL หรือ LTR เปลี่ยนทิศทางข้อความเพื่อรองรับภาษาจากขวาไปซ้าย ค่าเริ่มต้นเป็น LTR | สาย | LTR |
| errormessages | ข้อผิดพลาดที่แสดงต่อผู้ใช้โดยใช้ตัวเลือก ErrorCallback โดยที่ Image_name , Image_size และ Image_max_size จะถูกแทนที่ด้วยค่าที่เกี่ยวข้องซึ่งสามารถใช้สำหรับการปรับแต่งหรือการทำให้เป็นสากล | MarkdownerRorMessages | |
| ที่ซ่อนตัว | อาร์เรย์ของชื่อไอคอนที่จะซ่อน สามารถใช้เพื่อซ่อนไอคอนเฉพาะที่แสดงโดยค่าเริ่มต้นโดยไม่ต้องปรับแต่งแถบเครื่องมืออย่างสมบูรณ์ | สตริง [] | 'เคียงข้างกัน', 'เต็มหน้าจอ' |
| Imageaccept | รายการประเภท mime ที่คั่นด้วยเครื่องหมายจุลภาคที่ใช้เพื่อตรวจสอบประเภทภาพก่อนอัปโหลด (หมายเหตุ: ไม่น่าเชื่อถือไคลเอนต์ตรวจสอบประเภทไฟล์ที่ฝั่งเซิร์ฟเวอร์เสมอ) ค่าเริ่มต้นเป็น image/png, image/jpeg, image/jpg, image.gif | สาย | รูปภาพ/png, image/jpeg, image/jpg, image.gif |
| imagecsrftoken | โทเค็น CSRF เพื่อรวมการเรียก Ajax เพื่ออัปโหลดรูปภาพ ตัวอย่างเช่นใช้กับแบ็กเอนด์ Django | สาย | |
| imageMaxSize | ขนาดภาพสูงสุดในไบต์ตรวจสอบก่อนอัปโหลด (หมายเหตุ: ไม่น่าเชื่อถือไคลเอนต์ตรวจสอบขนาดภาพที่ฝั่งเซิร์ฟเวอร์เสมอ) ค่าเริ่มต้นเป็น 1024 * 1024 * 2 (2MB) | ยาว | 1024 * 1024 * 2 (2MB) |
| imagepathabsolute | หากตั้งค่าเป็น TRUE จะปฏิบัติต่อ ImageUrl จาก ImageUploadFunction และ FilePath ที่ส่งคืนจาก ImageUploadendPoint เป็นแบบสัมบูรณ์มากกว่าเส้นทางที่สัมพันธ์กันคือไม่ได้เตรียม window.location.origin | สาย | |
| imagetexts | ข้อความที่แสดงต่อผู้ใช้ (ส่วนใหญ่อยู่ในแถบสถานะ) สำหรับคุณสมบัติการนำเข้าภาพโดยที่ image_name , image_size และ image_max_size จะถูกแทนที่ด้วยค่าที่เกี่ยวข้องซึ่งสามารถใช้สำหรับการปรับแต่งหรือการทำให้เป็นสากล | Markdownimagetexts | โมฆะ |
| ImageUploadauthenticationschema | หากจำเป็นต้องมีการรับรองความถูกต้องสำหรับ API ให้กำหนดคุณสมบัตินี้ให้กับสคีมาที่จะใช้ Bearer เป็นคนทั่วไป | สาย | ว่างเปล่า |
| ImageUploadauthenticationToken | หากจำเป็นต้องมีการรับรองความถูกต้องสำหรับ API ให้กำหนดคุณสมบัตินี้ให้กับโทเค็น | สาย | ว่างเปล่า |
| ผ้าลินิน | หากตั้งค่าเป็น TRUE ให้เปิดใช้งานหมายเลขบรรทัดในตัวแก้ไข | บูล | เท็จ |
| การใช้งาน | ตั้งค่าคำที่จะแสดงในแถบสถานะสำหรับการนับบรรทัด | สาย | lines: |
| การขนานกัน | หากตั้งค่าเป็นเท็จให้ปิดการห่อบรรทัด ค่าเริ่มต้นเป็นจริง | บูล | เท็จ |
| Markdownurl | ตั้งค่า URL สำหรับคู่มือ Markdown | ลิงก์ไปยังคู่มือ Markdown | |
| MaxHeight | ตั้งค่าความสูงคงที่สำหรับพื้นที่องค์ประกอบ ตัวเลือก Minheight จะถูกละเว้น ควรเป็นสตริงที่มีค่า CSS ที่ถูกต้องเช่น "500px" ค่าเริ่มต้นเป็นไม่ได้กำหนด | สาย | |
| MaxUploadimageMessagesize | รับหรือตั้งค่าขนาดข้อความสูงสุดเมื่ออัปโหลดไฟล์ | ยาว | 20 * 1024 |
| Minheight | ตั้งค่าความสูงขั้นต่ำสำหรับพื้นที่องค์ประกอบก่อนที่จะเริ่มการเติบโตอัตโนมัติ ควรเป็นสตริงที่มีค่า CSS ที่ถูกต้องเช่น "500px" ค่าเริ่มต้นเป็น "300px" | สาย | 300px |
| Nativespellchecker | เปิดใช้งาน (จริง) หรือปิดการใช้งาน (เท็จ) การตรวจสอบการสะกดคำในตัวแก้ไข | บูล | จริง |
| ผู้ถือครองตำแหน่ง | หากตั้งค่าให้แสดงข้อความตัวยึดตำแหน่งที่กำหนดเอง | สาย | โมฆะ |
| segmentfetchtimeout | รับหรือตั้งค่าการหมดเวลาดึงข้อมูลส่วนเมื่ออัปโหลดไฟล์ | เวลา | 1 นาที |
| การฉาย | อาร์เรย์ของชื่อไอคอนที่จะแสดง สามารถใช้เพื่อแสดงไอคอนเฉพาะที่ซ่อนอยู่โดยค่าเริ่มต้นโดยไม่ต้องปรับแต่งแถบเครื่องมืออย่างสมบูรณ์ | สตริง [] | 'รหัส', 'ตาราง' |
| เครื่องตรวจสอบการสะกดคำ | เปิดใช้งาน (จริง) หรือปิดการใช้งาน (เท็จ) การตรวจสอบการสะกดคำในตัวแก้ไข | บูล | จริง |
| แท็บ | หากตั้งค่าให้ปรับแต่งขนาดแท็บ ค่าเริ่มต้นเป็น 2 | int | 2 |
| ธีม | แทนที่ธีม ค่าเริ่มต้นเป็น easymde | สาย | ความสะดวกสบาย |
| แถบเครื่องมือ | [ไม่บังคับ] รับหรือตั้งค่าเนื้อหาของแถบเครื่องมือ | การแสดงผล | |
| กล่องเครื่องมือ | หากตั้งค่าเป็นเท็จให้ปิดการใช้งานเคล็ดลับปุ่มแถบเครื่องมือ ค่าเริ่มต้นเป็นจริง | บูล | จริง |
| UploadImage | หากตั้งค่าเป็น TRUE เปิดใช้งานฟังก์ชันการอัพโหลดรูปภาพซึ่งสามารถเรียกใช้โดยการลาก-ดรอป, คัดลอกวางและผ่านหน้าต่างเรียกดูไฟล์ (เปิดเมื่อผู้ใช้คลิกที่ไอคอนอัพโหลดภาพ) ค่าเริ่มต้นเป็นเท็จ | บูล | เท็จ |
| ค่า | รับหรือตั้งค่า markdown | สาย | โมฆะ |
| Valuehtml | รับ HTML จากค่า markdown | สาย | โมฆะ |
| Wordsstatustext | ตั้งค่าคำที่จะแสดงในแถบสถานะสำหรับการนับคำ | สาย | words: |
| ชื่อ | คำอธิบาย | พิมพ์ |
|---|---|---|
| Errorcallback | ฟังก์ชั่นการโทรกลับที่ใช้เพื่อกำหนดวิธีการแสดงข้อความแสดงข้อผิดพลาด ค่าเริ่มต้นเป็น (errorMessage) => การแจ้งเตือน (errorMessage) | func <string, task> |
| ImageUploadChanged | เกิดขึ้นทุกครั้งที่ภาพที่เลือกเปลี่ยนไป | func <fileChangedEventArgs งาน> |
| ImageUploadended | เกิดขึ้นเมื่อการอัปโหลดรูปภาพแต่ละรายการสิ้นสุดลง | func <fileendedEventArgs, task> |
| ImageUploadendpoint | จุดสิ้นสุดที่ข้อมูลรูปภาพจะถูกส่งผ่านคำขอโพสต์แบบอะซิงโครนัส เซิร์ฟเวอร์ควรบันทึกภาพนี้และส่งคืนการตอบกลับ JSON | สาย |
| ImageUploadProgress | แจ้งความคืบหน้าของภาพที่เขียนไปยังสตรีมปลายทาง | func <fileProgressedEventArgs งาน> |
| ImageUploadStarted | เกิดขึ้นเมื่อการอัปโหลดรูปภาพแต่ละรายการเริ่มต้นขึ้น | func <filestartedEventArgs งาน> |
| valuechanging | เหตุการณ์ที่เกิดขึ้นหลังจากค่า markdown มีการเปลี่ยนแปลง | EventCallback |
| Valuehtmlchanged | เหตุการณ์ที่เกิดขึ้นหลังจากค่า markdown มีการเปลี่ยนแปลงและรหัส HTML ใหม่พร้อมใช้งาน | EventCallback |
ตัวแก้ไข Markdown สำหรับ Blazor สามารถดูแลการอัปโหลดไฟล์และเพิ่มรหัส markdown สัมพัทธ์ในตัวแก้ไข สำหรับสิ่งนั้น UploadImage ตี้จะต้องตั้งค่าเป็น true นอกจากนี้จะต้องระบุ API ที่อัปโหลดใน Property ImageUploadEndpoint ในบางกรณี API ต้องการการตรวจสอบสิทธิ์ คุณสมบัติ ImageUploadAuthenticationSchema และ ImageUploadAuthenticationToken ช่วยให้คุณสามารถผ่านสคีมาและโทเค็นที่ถูกต้องเพื่อใช้ในการโทร
ค่าเหล่านั้นจะถูกเพิ่มลงในคำขอ POST HttpClient ในส่วนหัว เฉพาะในกรณีที่คุณสมบัติทั้งสองไม่เป็นโมฆะพวกเขาจะถูกเพิ่มเข้าไปในส่วนหัว
หากคุณต้องการเข้าใจวิธีการสร้าง API สำหรับการอัปโหลดดีกว่าฉันได้สร้างโพสต์เฉพาะบน PureSourceCoDE
ด้านล่างนี้เป็นไอคอนแถบเครื่องมือในตัว (บางส่วนเท่านั้นที่เปิดใช้งานโดยค่าเริ่มต้น) ซึ่งสามารถจัดระเบียบใหม่ได้ตามที่คุณต้องการ "ชื่อ" เป็นชื่อของไอคอนที่อ้างอิงใน JS "การกระทำ" เป็นฟังก์ชั่นหรือ URL ที่จะเปิด "คลาส" เป็นคลาสที่มอบให้กับไอคอน "ToolTip" เป็นคำแนะนำเครื่องมือขนาดเล็กที่ปรากฏผ่านแอตทริบิวต์ title="" โปรดทราบว่าคำใบ้ทางลัดจะถูกเพิ่มโดยอัตโนมัติและสะท้อนการกระทำที่ระบุหากมีการผูกคีย์ที่กำหนดให้กับมัน (เช่นค่าของ action ที่ตั้งค่าเป็น bold และคำแนะนำ tooltip ที่ตั้งค่าเป็น Bold ข้อความสุดท้ายที่ผู้ใช้จะเห็นจะเป็น "BOLD (CTRL-B)")
นอกจากนี้คุณสามารถเพิ่มตัวคั่นระหว่างไอคอนใด ๆ โดยเพิ่ม "|" ไปยังอาร์เรย์แถบเครื่องมือ
| ชื่อ | การกระทำ | คำแนะนำเครื่องมือ ระดับ |
|---|---|---|
| ตัวหนา | สลับ | ตัวหนา fa fa-bold |
| ตัวเอียง | สลับ | ตัวเอียง fa fa-italic |
| การตี | Togglestrikethrough | การตี fa fa-strikethrough |
| หัวเรื่อง | Toggleheadingsmaller | หัวเรื่อง Fa Fa-header |
| หัวเรื่อง | Toggleheadingsmaller | หัวเรื่องเล็ก ๆ Fa Fa-header |
| หัวเรื่อง | Toggleheadingbigger | หัวเรื่องที่ใหญ่กว่า fa fa-lg fa-header |
| หัวเรื่อง 1 | สลับหัว 1 | หัวเรื่องใหญ่ FA FA-Header Header-1 |
| ส่วนหัว 2 | Toggleheading2 | หัวเรื่องขนาดกลาง ส่วนหัว FA FA FA-Header-2 |
| หัวเรื่อง -3 | สลับหัว 3 | หัวเรื่องเล็ก ๆ ส่วนหัว FA FA FA-Header-3 |
| รหัส | ToggleCodeBlock | รหัส fa fa-code |
| อ้าง | Toggleblockquote | อ้าง fa fa-quote-left |
| รายการที่ไม่ได้เรียงลำดับ | ToggleunorderEdList | รายการสามัญ fa fa-list-ul |
| รายการสั่งซื้อ | ToggleorderEdList | รายการหมายเลข fa fa-list-ol |
| ทำความสะอาดบล็อก | ทำความสะอาด | บล็อกทำความสะอาด fa fa-eraser |
| การเชื่อมโยง | การเชื่อมโยง | สร้างลิงก์ Fa Fa-Link |
| ภาพ | การวาดภาพ | แทรกภาพ fa fa-picture-o |
| โต๊ะ | สามารถดึงได้ | โต๊ะแทรก FA FA-TABLE |
| กฎแนวนอน | การดึงออกมา | แทรกเส้นแนวนอน FA FA-MINUS |
| ดูตัวอย่าง | TogglePreview | สลับตัวอย่าง fa fa-eye ไม่ต้องปฏิเสธ |
| เคียงข้างกัน | สลับกัน | สลับกัน Fa Fa-Columns ไม่ต้องถอดถอน |
| เต็มหน้าจอ | Togglefullscreen | สลับแบบเต็มหน้าจอ Fa fa-arrow |
| แนะนำ | ลิงค์นี้ | คู่มือ Markdown FA FA-QUESTION CIRN |
Easymde มาพร้อมกับอาร์เรย์ของคีย์บอร์ดที่กำหนดไว้ล่วงหน้า แต่สามารถเปลี่ยนแปลงได้ด้วยตัวเลือกการกำหนดค่า รายการของค่าเริ่มต้นมีดังนี้:
| ทางลัด (Windows / Linux) | ทางลัด (macos) | การกระทำ |
|---|---|---|
| Ctrl-' | cmd- ' | "Toggleblockquote" |
| Ctrl-B | CMD-B | "Togglebold" |
| ctrl-e | cmd-e | "Cleanblock" |
| CTRL-H | CMD-H | "Toggleheadingsmaller" |
| ctrl-i | cmd-i | "Toggleitalic" |
| Ctrl-K | CMD-K | "Drawlink" |
| CTRL-L | CMD-L | "ToggleunorderEdList" |
| CTRL-P | CMD-P | "TogglePreview" |
| ctrl-alt-c | cmd-alt-c | "ToggleCodeBlock" |
| ctrl-alt-i | cmd-alt-i | "drawimage" |
| ctrl-alt-l | cmd-alt-l | "ToggleorderEdList" |
| shift-ctrl-h | Shift-CMD-H | "Toggleheadingbigger" |
| F9 | F9 | "Toggledlebyside" |
| F11 | F11 | "Togglefullscreen" |
ผู้คนมากมายส่งคำถามเดียวกันให้ฉัน ส่วนประกอบของฉัน (MarkdownEditor, DataTable, ไอคอน SVG และอื่น ๆ ที่คุณพบใน GitHub ของฉัน) เป็นฟรีแวร์
ฉันขอให้คุณมีส่วนร่วมในโครงการด้วยวิธีใดวิธีหนึ่งต่อไปนี้:
ถ้าคุณไม่รู้ว่าจะทำอย่างไรหรือคุณ:
จากนั้นคุณสามารถซื้อใบอนุญาตสนับสนุนที่ฉันสร้างขึ้นได้ มีราคาที่แตกต่างกัน จำนวนเงินคือการตัดสินใจของคุณ คุณพบว่ามีรายการทั้งหมดในร้านค้า PuresourceCode
การบริจาคให้คุณ:
| ชื่อองค์ประกอบ | ฟอรัม | คำอธิบาย |
|---|---|---|
| DataTable for blazor | ฟอรัม | ส่วนประกอบ DataTable สำหรับ Blazor WebAssembly และ Blazor Server |
| MARKDOWN EDITOR สำหรับ Blazor | ฟอรัม | นี่คือตัวแก้ไข Markdown สำหรับใช้ใน Blazor มันมีตัวอย่างสดรวมถึงคู่มือวิธีใช้ที่ฝังตัวสำหรับผู้ใช้ |
| ตรวจจับเบราว์เซอร์สำหรับ Blazor | ฟอรัม | เบราว์เซอร์ตรวจจับสำหรับ Blazor WebAssembly และ Blazor Server |
| รหัสสำหรับ Blazor | ฟอรัม | เพิ่มรหัสตัวอย่างในหน้า Blazor ของคุณสำหรับ 196 ภาษาการเขียนโปรแกรมด้วย 243 สไตล์ |
| คัดลอกไปยังคลิปบอร์ด | ฟอรัม | เพิ่มปุ่มเพื่อคัดลอกข้อความใน Clipbord |
| ไอคอน SVG และธงสำหรับ Blazor | ฟอรัม | ห้องสมุดที่มีไอคอน SVG และธง SVG จำนวนมากเพื่อใช้ในหน้ามีดโกนของคุณ |
| กล่องโต้ตอบ Modal สำหรับ Blazor | ฟอรัม | กล่องโต้ตอบ Modal Simple สำหรับ Blazor WebAssembly |
| psc.extensions | ฟอรัม | ฟังก์ชั่นมากมายสำหรับ. NET5 ในแพ็คเกจ NUGET ที่คุณสามารถดาวน์โหลดได้ฟรี เรารวบรวมในฟังก์ชั่นแพ็คเกจนี้สำหรับการทำงานประจำวันเพื่อช่วยคุณในการเรียกร้องสตริง enums วันที่และเวลาการแสดงออก ... |
| ขนนกสำหรับ Blazor | ฟอรัม | ส่วนประกอบ Quill เป็นตัวควบคุมที่นำกลับมาใช้ใหม่ได้ซึ่งช่วยให้เราสามารถใช้ขนนกได้อย่างง่ายดายและวางหลายอินสแตนซ์ของมันในหน้าเดียวในแอปพลิเคชัน Blazor ของเรา |
| ส่วนสำหรับ Blazor | ฟอรัม | นี่คือส่วนประกอบเซ็กเมนต์สำหรับแอสเซมบลีเว็บของ Blazor และ Blazor Server |
| แท็บสำหรับ Blazor | ฟอรัม | นี่คือส่วนประกอบแท็บสำหรับแอสเซมบลีเว็บของ Blazor และ Blazor Server |
| WorldMap สำหรับ Blazor | ฟอรัม | แสดงแผนที่โลกด้วยข้อมูลของคุณ |
