BzEditor

ادیتور متن

CKEditor 5 با چیدمان فارسی و راست به چپ.

ادیتور فارسی (RTL)

با bind-Value خروجی HTML را میگیره. جهت راست به چپ خودکار است.

خروجی HTML:

<p>سلام! این یک ادیتور <strong>فارسی</strong> راست به چپ است.</p>
razor
@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برچسب بالای ادیتور
Height260pxارتفاع ناحیه ی نوشتن
ReadOnlyfalseغیرفعال کردن ویرایش
ValueChangedایونت تغییر محتوا
razor
@using BzCore.Components.Editor

<BzEditor Value="@_html" ReadOnly Height="150px" />

@code {
    private string _html = "<p>این متن فقط خواندنی است و قابل ویرایش نمیباشد.</p>";
}
راه اندازی

این کامپوننت به اسکریپت CKEditor 5 نیاز داره؛ آن را یک بار در App.razor اضافه کنید.

razor
@* 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>

@*

*@