BlazorMarkdownEditor
Rewrite the Markdown Editor for Blazor with EasyMDE
Ini adalah komponen editor markdown untuk Blazor WebAssembly dan Blazor Server dengan .net8. Komponen ini didasarkan pada EASYMDE versi 1.0.x untuk membuat editor. Saya memutuskan untuk membuat repositori saya untuk perpustakaan JavaScript karena saya ingin memiliki kendali atas pembaruan dan perubahan. Komponen ini adalah pembungkus di sekitar pustaka JavaScript dan ini adalah komponen Blazor yang memungkinkan Anda menggunakan editor Markdown di aplikasi Blazor Anda.
Untuk lebih banyak dokumentasi dan bantu komponen ini, kunjungi posting yang saya buat di sini.
Coba Markdown Editor Online (Unggah tidak diaktifkan)
Tambahkan editor ke _Imports.razor Anda
@using PSC.Blazor.Components.MarkdownEditor
@using PSC.Blazor.Components.MarkdownEditor.EventsArgs
Kemudian, di index.html , host.html atau App.razor Anda Tambahkan baris itu:
<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>
Ingatlah bahwa jQuery juga diperlukan. Komponen ini berisi skrip editor Markdown yang mudah versi 1.0.x yang juga dipertahankan sendiri. Anda dapat menambahkan skrip ini dalam proyek Anda tetapi jika Anda menggunakan skrip dalam komponen, Anda yakin itu berfungsi dengan baik dan semua fungsi diuji.
CSS markdowneditor.css berisi gaya untuk tag baru yang sama yang saya tambahkan di editor Markdown seperti att , note , tip , warn dan video .
Di halaman Razor , kami dapat menambahkan komponen dengan baris ini
<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;
}
}
Berbeda utama antara value dan ValueHTMLChanged adalah bahwa Value mengembalikan teks yang ditulis dalam editor sebagai string sedangkan ValueHTMLChanged mengembalikan kode HTML yang diberikan untuk teks. ValueHTMLChanged mencakup kode untuk menampilkan grafik putri duyung dalam tag SVG .
Hasilnya adalah editor penurunan harga yang bagus seperti di tangkapan layar berikut. Ini adalah tangkapan layar dari demo di repositori ini.
Di editor penurunan harga Anda, tambahkan kode berikut
<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;
}
}
Di MarkdownEditor tag, Anda menambahkan Toolbar tab baru yang berisi satu atau lebih MarkdownToolbarButton .
Setiap MarkdownToolbarButton dapat memiliki salah satu Action default (lihat tabel di bawah) atau nilai khusus misalnya tautan ke situs web. Jika Anda ingin menampilkan sebelum MarkdownToolbarButton garis vertikal, tambahkan Separator properti di MarkdownToolbarButton .
Dalam kasus yang sama, Anda ingin menyegarkan konten editor markdown setelah init pertama, misalnya karena aplikasi Anda harus membaca nilai dari API dan butuh waktu. Untuk itu, Anda harus menambahkan ref ke MarkdownEditor dan kemudian menggunakannya untuk menghubungi properti SetValueAsync , seperti pada kode berikut
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1" />
@code {
MarkdownEditor Markdown1;
// omitted code...
async Task ChangeText()
{
markdownValue = "Test!";
await Markdown1.SetValueAsync(markdownValue);
}
}
Untuk menambahkan lebih banyak fungsi ke komponen, itu termasuk versi putriid.js 10.2.1 yang memungkinkan untuk menambahkan diagram dan grafik yang mengesankan dalam komponen markdown seperti
Untuk menambahkan fungsionalitas ini ke editor markdown, cukup untuk menambahkan index.html skrip ini
< script src = "/_content/PSC.Blazor.Components.MarkdownEditor/js/mermaid.min.js" > </ script >Skrip akan memeriksa apakah perpustakaan ini dipanggil. Jika ditambahkan ke halaman, editor Markdown secara otomatis akan menambahkan tombol di toolbar untuk memasukkan tag untuk putri duyung. Tag itu
```mermaid
```
Menggunakan skrip ini di komponen
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
atau CDN
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
Render putri duyung tidak akan berhasil. Kesalahannya
E. Replace bukan fungsi
Jadi, saya sarankan untuk meningkatkan skrip dengan yang baru seperti yang saya jelaskan di paragraf berikut.
Menggunakan versi baru putri duyung dari 10.9.1 memerlukan penambahan kode ini di index.html , host.html atau 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>
Saat ini, saya mencoba menemukan cara untuk memasukkan skrip ini di markdownEditor.js tapi saya tidak yakin itu akan berhasil.
### 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: Halo John, apa kabar? John->> Alice: Hebat! Alice-) John: Sampai jumpa nanti!
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 Bagian Tugas A Tugas: A1, 2014-01-01, 30d Tugas Lain: Setelah A1, 20d Bagian Tugas Lain di Sec: 2014-01-12, 12d Tugas Lain: 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).
Pelanggan Erdiagram || --o {order: Places Order ||-| {line-item: Berisi pelanggan} | .. | {Delivery-Address: Use
## 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
Jika kedua perpustakaan dimuat di index.html , render putri duyung tidak akan berfungsi.
Dalam markdown, ada beberapa tag yang hilang untuk menampilkan beberapa informasi berguna di halaman seperti catatan sorot, tip, peringatan atau pesan perhatian. Jadi, saya menambahkannya di editor penurunan harga ini. Contoh hasil implementasi ini ada di tangkapan layar berikut.
Untuk menambahkan pesan, klik ikon di toolbar di editor atau tambahkan perintah itu:
| Memerintah | Warna | Keterangan |
|---|---|---|
| `` `att | Merah | Tampilkan pesan perhatian |
| `` `note | Biru langit | Tambahkan catatan di dokumen |
| `` `Tip | Hijau | Menampilkan pesan tip |
| `` `WARN | Oranye | Ini adalah pesan peringatan |
Dalam komponen editor markdown, ada CSS untuk mereka yang disebut alert.css dan Anda dapat menambahkannya ke index.html dengan baris ini jika Anda belum menambahkan markdowneditor.css
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/alert.css" rel="stylesheet" />
Secara default, editor Markdown menyimpan teks di penyimpanan lokal browser.
AutoSaveEnabled True dan AutoSaveSubmitDelay diatur hingga 5000 milidetik. Ini berarti bahwa teks disimpan setiap 5 detik.
Jika Anda ingin membersihkan teks yang disimpan, Anda dapat menggunakan kode berikut
<MarkdownEditor @bind-Value="@markdownValue" MaxHeight="300px"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1"
AutoSaveEnabled="true" />
@code {
MarkdownEditor Markdown1;
async Task DeleteStorage()
{
await Markdown1.CleanAutoSave();
}
}
Di editor Markdown, Anda dapat menambahkan video di teks. Video dapat dari YouTube, Vimeo atau penyedia video lainnya. Video ditampilkan di editor dan dalam kode HTML yang diberikan.
```video
https://www.youtube.com/shorts/JY1zFZgX6zM
```
Editor Markdown untuk Blazor memiliki koleksi properti yang estensif untuk memetakan semua fungsi dalam versi JavaScript. Di repositori ini, ada 2 proyek:
Index.razor di mana saya menunjukkan cara menggunakan komponen dengan fungsi dasar dan Upload.razor yang menunjukkan cara mengatasi unggahan gambar. Untuk menguji unggahan, proyek MarkdownEditorDemo.Api harus berjalan| Nama | Keterangan | Jenis | Bawaan |
|---|---|---|---|
| AutosaveEnabled | Mendapat atau mengatur pengaturan untuk Simpan Otomatis. Menyimpan teks yang sedang ditulis dan akan memuatnya kembali di masa depan. Ini akan melupakan teks ketika formulir yang terkandung di dalam dikirimkan. Direkomendasikan untuk memilih ID unik untuk editor Markdown. | bool | PALSU |
| Autosaveid | Mendapat atau mengatur pengidentifikasi Simpan Otomatis. Anda harus mengatur pengidentifikasi string unik sehingga komponen dapat autosave. Sesuatu yang memisahkan ini dari contoh komponen lain di tempat lain di situs web Anda. | rangkaian | Nilai default |
| Autosavedelay | Keterlambatan antara penyelamatan, dalam milidetik. Default ke 10000 (10s). | int | 10000 (10s) |
| AutoSaveSubmitDelay | Tunda sebelum mengasumsikan bahwa pengiriman formulir gagal dan menyimpan teks, dalam milidetik. | int | 5000 (5s) |
| AutoSavetext | Teks untuk autosave | rangkaian | Autosaved: |
| AutoSavetimeformatlocale | Atur format untuk ditampilkan DateTime. Untuk info lebih lanjut, lihat instance dokumentasi JavaScript Datetimeformat | rangkaian | en-us |
| AutoSavetimeFormatyear | Tetapkan format untuk tahun ini | rangkaian | numerik |
| Autosavetimeformathonth | Tetapkan format untuk bulan ini | rangkaian | panjang |
| AUTOSAVETIMEFORMAtday | Atur format untuk hari ini | rangkaian | 2 digit |
| AutoSavetimeformathour | Atur format untuk jam ini | rangkaian | 2 digit |
| AutoSavetimeformatminute | Atur format untuk menit | rangkaian | 2 digit |
| AutodownloadFontawesome | Jika diatur ke true, paksa unduhan font mengagumkan (digunakan untuk ikon). Jika diatur ke false, mencegah pengunduhan. | Bool? | batal |
| Karakterstatustext | Atur kata -kata untuk ditampilkan di statusbar untuk penghitungan karakter | rangkaian | characters: |
| CustomButtonClicked | Terjadi setelah tombol bilah alat khusus diklik. | EventCallback | |
| CustomImageupload | Menyetel penangan unggahan gambar kustom | ||
| Arah | RTL atau LTR. Mengubah arah teks untuk mendukung bahasa kanan-ke-kiri. Default ke ltr. | rangkaian | ltr |
| ErrorMessages | Kesalahan yang ditampilkan kepada pengguna, menggunakan opsi ERRORCAllBack, di mana Image_Name , Image_Size dan Image_Max_Size akan diganti dengan nilai masing -masing, yang dapat digunakan untuk kustomisasi atau internasionalisasi. | MarkdownerRormessages | |
| Hideicons | Sejumlah nama ikon untuk disembunyikan. Dapat digunakan untuk menyembunyikan ikon spesifik yang ditunjukkan secara default tanpa sepenuhnya menyesuaikan toolbar. | rangkaian[] | 'berdampingan', 'layar penuh' |
| ImageAccept | Daftar tipe-mime yang dipisahkan secara koma yang digunakan untuk memeriksa jenis gambar sebelum diunggah (Catatan: Jangan pernah mempercayai klien, selalu periksa jenis file di sisi server). Default ke Image/PNG, Image/JPEG, Image/JPG, Image.gif. | rangkaian | Image/PNG, Image/JPEG, Image/JPG, Image.gif |
| Imagecsrftoken | Token CSRF untuk dimasukkan dengan panggilan AJAX untuk mengunggah gambar. Misalnya, digunakan dengan backend Django. | rangkaian | |
| ImageMaxSize | Ukuran gambar maksimum dalam byte, diperiksa sebelum diunggah (Catatan: Jangan pernah mempercayai klien, selalu periksa ukuran gambar di sisi server). Default ke 1024 * 1024 * 2 (2MB). | panjang | 1024 * 1024 * 2 (2MB) |
| ImagePathabsolute | Jika diatur ke true, akan memperlakukan ImageUrl dari ImageUploadFunction dan Fileepath dikembalikan dari ImageuploadendPoint sebagai jalur absolut dan bukan relatif, yaitu tidak prepend window.location.origin untuk itu. | rangkaian | |
| Imagetexts | Teks yang ditampilkan kepada pengguna (terutama pada bilah status) untuk fitur Impor Image, di mana Image_Name , Image_Size dan Image_Max_Size akan diganti dengan nilai masing -masing, yang dapat digunakan untuk kustomisasi atau internasionalisasi. | Markdownimagetexts | batal |
| ImageuploadAuthenCicationsChema | Jika otentikasi untuk API diperlukan, tetapkan ke properti ini, skema untuk digunakan. Bearer adalah yang umum. | rangkaian | kosong |
| ImageuploadAuthenticationToken | Jika otentikasi untuk API diperlukan, tetapkan ke properti ini token | rangkaian | kosong |
| Linenumbers | Jika diatur ke True, aktifkan nomor baris di editor. | bool | PALSU |
| Linesstatustext | Atur kata -kata untuk ditampilkan di statusbar untuk penghitungan garis | rangkaian | lines: |
| Linewrapping | Jika diatur ke false, nonaktifkan pembungkus garis. Default ke true. | bool | PALSU |
| Markdownurl | Atur URL untuk Panduan Markdown. | Tautan ke Panduan Markdown | |
| Maxheight | Mengatur tinggi tetap untuk area komposisi. Opsi MinHeight akan diabaikan. Harus berupa string yang berisi nilai CSS yang valid seperti "500px". Default untuk tidak ditentukan. | rangkaian | |
| MAXUPLOADIMAGEMESSAGESIZE | Mendapat atau mengatur ukuran pesan maks saat mengunggah file. | panjang | 20 * 1024 |
| Minheight | Mengatur ketinggian minimum untuk area komposisi, sebelum mulai tumbuh secara otomatis. Harus berupa string yang berisi nilai CSS yang valid seperti "500px". Default ke "300px". | rangkaian | 300px |
| NativeSpellChecker | Aktifkan (true) atau nonaktifkan (false) check ejaan di editor | bool | BENAR |
| Placeholder | Jika diatur, menampilkan pesan placeholder khusus. | rangkaian | batal |
| SegmentFetchTimeout | Mendapat atau mengatur timeout mengambil segmen saat mengunggah file. | Rentang waktu | 1 menit |
| Showicons | Sejumlah nama ikon untuk ditampilkan. Dapat digunakan untuk menampilkan ikon spesifik yang disembunyikan secara default tanpa sepenuhnya menyesuaikan toolbar. | rangkaian[] | 'Kode', 'Tabel' |
| Spellchecker | Aktifkan (true) atau nonaktifkan (false) check ejaan di editor | bool | BENAR |
| Tabsize | Jika diatur, sesuaikan ukuran tab. Default ke 2. | int | 2 |
| Tema | Mengesampingkan temanya. Default ke Easymde. | rangkaian | Easymde |
| Toolbar | [Opsional] Mendapat atau mengatur konten toolbar. | Renderfragment | |
| Toolbartips | Jika diatur ke false, nonaktifkan kiat tombol toolbar. Default ke true. | bool | BENAR |
| Unggahimage | Jika diatur ke True, mengaktifkan fungsionalitas unggahan gambar, yang dapat dipicu oleh drag-drop, copy-paste dan melalui jendela Browse-File (dibuka ketika pengguna mengklik ikon unggahan-gambar). Default ke false. | bool | PALSU |
| Nilai | Mendapat atau menetapkan nilai penurunan harga. | rangkaian | batal |
| ValueHtml | Mendapat HTML dari nilai penurunan harga. | rangkaian | batal |
| WordSstatustext | Atur kata -kata untuk ditampilkan di statusbar untuk penghitungan kata | rangkaian | words: |
| Nama | Keterangan | Jenis |
|---|---|---|
| ErrorCallback | Fungsi panggilan balik yang digunakan untuk menentukan cara menampilkan pesan kesalahan. Default ke (errorMessage) => alert (errorMessage). | Func <string, Task> |
| Imageuploadchanged | Terjadi setiap kali gambar yang dipilih telah berubah. | Func <filechangedEventArgs, Task> |
| Imageuploadended | Terjadi ketika unggahan gambar individu telah berakhir. | Func <FileDeendeVentArgs, Task> |
| ImageuploadendPoint | Titik akhir di mana data gambar akan dikirim, melalui permintaan posting asinkron. Server seharusnya menyimpan gambar ini, dan mengembalikan respons JSON. | rangkaian |
| ImageuploadProgressed | Beri tahu kemajuan gambar yang ditulis ke aliran tujuan. | Func <fileprograpedEventArgs, Task> |
| ImageUploadStarted | Terjadi ketika unggahan gambar individu telah dimulai. | Func <filestartedEventArgs, Task> |
| ValueChanged | Peristiwa yang terjadi setelah nilai penurunan harga telah berubah. | EventCallback |
| ValueHtmlChanged | Peristiwa yang terjadi setelah nilai penurunan harga telah berubah dan kode HTML baru tersedia. | EventCallback |
Editor Markdown untuk Blazor dapat mengurus mengunggah file dan menambahkan kode markdown relatif di editor. Untuk itu, UploadImage properti harus ditetapkan ke true . Juga, unggahan API harus ditentukan dalam properti ImageUploadEndpoint . Dalam beberapa kasus, API membutuhkan otentikasi. Properties ImageUploadAuthenticationSchema dan ImageUploadAuthenticationToken memungkinkan Anda untuk melewati skema dan token yang benar untuk digunakan dalam panggilan.
Nilai -nilai tersebut akan ditambahkan ke permintaan HttpClient POST di header. Hanya jika kedua properti tidak nol, mereka akan ditambahkan ke header.
Jika Anda ingin memahami lebih baik cara membuat API untuk unggahan, saya telah membuat posting tertentu di pureSourcode.
Di bawah ini adalah ikon toolbar bawaan (hanya beberapa di antaranya yang diaktifkan secara default), yang dapat direorganisasi sesuka Anda. "Nama" adalah nama ikon, yang dirujuk dalam JS. "Tindakan" adalah fungsi atau URL untuk dibuka. "Kelas" adalah kelas yang diberikan kepada ikon. "Tooltip" adalah tooltip kecil yang muncul melalui atribut title="" . Perhatikan bahwa petunjuk pintasan ditambahkan secara otomatis dan mencerminkan tindakan yang ditentukan jika memiliki ikatan kunci yang ditetapkan untuk itu (yaitu dengan nilai action yang diatur ke bold dan tooltip yang diatur ke Bold , teks akhir yang akan dilihat pengguna akan menjadi "tebal (ctrl-b)").
Selain itu, Anda dapat menambahkan pemisah antara ikon apa pun dengan menambahkan "|" ke array toolbar.
| Nama | Tindakan | Tooltip Kelas |
|---|---|---|
| berani | Togglebold | Berani fa fa-bold |
| miring | toggleitalic | Miring fa fa-iT dalam |
| Strikethrough | togglestrikethrough | Strikethrough fa-strikethrough |
| menuju | Toggleheadingsmaller | Menuju fa fa-header |
| heading-smaller | Toggleheadingsmaller | Judul yang lebih kecil fa fa-header |
| heading-gigger | ToggleheadingBigger | Judul yang lebih besar fa-lg fa-header |
| Heading-1 | toggleheading1 | Judul besar Fa-header header-1 |
| Heading-2 | Toggleheading2 | Judul sedang Fa-header header-2 |
| Heading-3 | Toggleheading3 | Judul kecil Fa-Header Header-3 |
| kode | toggleCodeBlock | Kode FA-Code FA |
| mengutip | toggleblockquote | Mengutip Fa-Qute-Left-Left |
| daftar yang tidak tertib | TOGGLEUNDORDERDEDLIST | Daftar generik fa fa-list-ul |
| Daftar yang dipesan | Toggleorderededlist | Daftar bernomor fa fa-list-ol |
| blok bersih | CleanBlock | Blok bersih fa-eraser |
| link | Drawlink | Buat tautan fa fa-link |
| gambar | DrawImage | Masukkan gambar fa fa-picture-o |
| meja | drawtable | Sisipkan tabel fa fa-table |
| aturan horizontal | Dawhorizontalrule | Masukkan garis horizontal fa fa-minus |
| pratinjau | TOGGLEPREVIEW | Pratinjau Sakelar fa fa-eye tidak bisa disalahgunakan |
| berdampingan | toggleSideByside | Beralih berdampingan fa-columns no-doning-disable no-mobile |
| layar penuh | TogglefullScreen | Toggle layar penuh fa fa-arrows-alt no-doningble no-mobile |
| memandu | Tautan ini | Panduan Markdown FA-QUESTION-Circle |
Easymde hadir dengan serangkaian pintasan keyboard yang telah ditentukan sebelumnya, tetapi mereka dapat diubah dengan opsi konfigurasi. Daftar yang default adalah sebagai berikut:
| Pintasan (Windows / Linux) | Pintasan (MacOS) | Tindakan |
|---|---|---|
| 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 | "Toggleunorderededlist" |
| 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 | "Toggleorderededlist" |
| Shift-ctrl-h | Shift-cmd-h | "ToggleheadingBigger" |
| F9 | F9 | "ToggleSideByside" |
| F11 | F11 | "TogglefullScreen" |
Banyak orang mengirimi saya pertanyaan yang sama. Komponen saya (MarkDownEditor, DataTable, Ikon SVG dan orang lain yang Anda temukan di GitHub saya) adalah freeware.
Saya meminta Anda untuk berkontribusi pada proyek dengan salah satu cara berikut:
Jika Anda tidak tahu cara melakukannya atau Anda:
Kemudian, Anda dapat membeli salah satu lisensi dukungan yang saya buat. Ada harga yang berbeda. Jumlahnya adalah keputusan Anda. Anda menemukan memiliki daftar lengkap di toko pureSourcecode
Kontribusinya memberi Anda:
| Nama Komponen | Forum | Keterangan |
|---|---|---|
| DataTable untuk Blazor | Forum | Komponen DataTable untuk Blazor WebAssembly dan Blazor Server |
| Editor Markdown untuk Blazor | Forum | Ini adalah editor penurunan harga untuk digunakan di Blazor. Ini berisi pratinjau langsung serta panduan bantuan yang disematkan untuk pengguna. |
| Browser mendeteksi Blazor | Forum | Deteksi browser untuk Blazor WebAssembly dan Blazor Server |
| CodeSnipper untuk Blazor | Forum | Tambahkan Cuplikan Kode di Halaman Blazor Anda untuk 196 Bahasa Pemrograman Dengan 243 Gaya |
| Salin ke clipboard | Forum | Tambahkan tombol untuk menyalin teks di clipbord |
| Ikon dan bendera SVG untuk Blazor | Forum | Perpustakaan dengan banyak ikon SVG dan bendera SVG untuk digunakan di halaman pisau cukur Anda |
| Dialog Modal untuk Blazor | Forum | Dialog Modal Sederhana untuk Blazor WebAssembly |
| PSC.Extensions | Forum | Banyak fungsi untuk .net5 dalam paket nuget yang dapat Anda unduh secara gratis. Kami mengumpulkan dalam paket ini berfungsi untuk pekerjaan sehari -hari untuk membantu Anda dengan klaim, string, enum, tanggal dan waktu, ekspresi ... |
| Quill untuk Blazor | Forum | Komponen Quill adalah kontrol yang dapat digunakan kembali khusus yang memungkinkan kami untuk dengan mudah mengonsumsi pena bulu dan menempatkan banyak contohnya pada satu halaman dalam aplikasi Blazor kami |
| Segmen untuk Blazor | Forum | Ini adalah komponen segmen untuk perakitan web blazor dan server blazor |
| Tab untuk Blazor | Forum | Ini adalah komponen tab untuk perakitan web blazor dan server blazor |
| WorldMap untuk Blazor | Forum | Tunjukkan peta dunia dengan data Anda |
