BzEditor
ادیتور متن
CKEditor 5 با چیدمان فارسی و راست به چپ.
دکمهفرم و اینپوتگروه اینپوتگروه دکمهانتخاب تاریختکمیل خودکارکارتنمایشلودینگدیالوگاعلانپیام عملیاتمنو کشوییکانتکس منوصفحه بندیلایت باکسدرختدیتاگریدنمودارتب و آکاردیوننویگیشن بارسایدبارتایم لاینویزارداسلایدرآپلودرادیتور متنتقویمابزار ایرانی
کامپوننتی پیدا نشد.
ادیتور فارسی (RTL)
با bind-Value خروجی HTML را میگیره. جهت راست به چپ خودکار است.
خروجی HTML:
<p>سلام! این یک ادیتور <strong>فارسی</strong> راست به چپ است.</p>
@using BzCore.Components.Editor
<BzEditor @bind-Value="_html" Label="متن" Height="220px" />
<pre>@_html</pre>
@code {
private string? _html = "<p>سلام خوبی؟ تست ادیتور <strong>فارسی</strong> راست به چپ است.</p>";
}حالت فقط خوندنی
برای نمایش محتوا بدون امکان ویرایش.
| پارامتر | پیش فرض | توضیح |
|---|---|---|
Value | — | محتوای HTML (با bind-Value) |
Label | — | برچسب بالای ادیتور |
Height | 260px | ارتفاع ناحیه ی نوشتن |
ReadOnly | false | غیرفعال کردن ویرایش |
ValueChanged | — | ایونت تغییر محتوا |
@using BzCore.Components.Editor
<BzEditor Value="@_html" ReadOnly Height="150px" />
@code {
private string _html = "<p>این متن فقط خواندنی است و قابل ویرایش نمیباشد.</p>";
}راه اندازی
این کامپوننت به اسکریپت CKEditor 5 نیاز داره؛ آن را یک بار در App.razor اضافه کنید.
بدون افزودن اسکریپت CDN، ادیتور رندر نمیشه و فقط یک ناحیه ی خالی می بینید.
@* App.razor — add the CKEditor 5 script once, before blazor.web.js *@
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
<script src="_content/Blazify.Core/js/bz-core.js"></script>
<script src="_framework/blazor.web.js"></script>
@*
*@