Editor — Blazify

Persian editor (RTL)

bind-Value gives you the HTML output. Right-to-left is handled for you.

Body

HTML output:

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

Read-only mode

For showing content without letting anyone edit it.

Parameter	Default	Description
`Value`	—	The HTML content (use bind-Value)
`Label`	—	A label above the editor
`Height`	`260px`	Height of the writing area
`ReadOnly`	`false`	Disables editing
`ValueChanged`	—	Fires when the content changes

razor

@using BzCore.Components.Editor

<BzEditor Value="@_html" ReadOnly Height="150px" />

@code {
    private string _html = "<p>این متن فقط خواندنی است و قابل ویرایش نمیباشد.</p>";
}

Setup

This component needs the CKEditor 5 script; add it once in App.razor.

Without the CDN script the editor will not render and you will only see an empty area.

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

Rich text editor