95 lines
2.2 KiB
Plaintext
95 lines
2.2 KiB
Plaintext
|
|
@* <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow-md"> *@
|
|
<!-- Toolbar -->
|
|
@* <div class="flex gap-2 mb-2">
|
|
<button @onclick='() => ExecCmd(" bold")' class="btn">B</button>
|
|
<button @onclick='() => ExecCmd(" italic")' class="btn">I</button>
|
|
<button @onclick='() => ExecCmd(" underline")' class="btn">U</button>
|
|
<button @onclick="Clear" class="btn text-red-600 dark:text-red-400">پاکسازی</button>
|
|
</div> *@
|
|
|
|
<!-- Editable Content -->
|
|
|
|
<div @ref="EditorRef" id="@Id"
|
|
@oninput="UpdateContent"
|
|
contenteditable="true"
|
|
class="@Class">
|
|
|
|
</div>
|
|
|
|
<!-- Preview (Optional) -->
|
|
@* <div class="mt-4">
|
|
<h3 class="text-gray-600 dark:text-gray-400 mb-1 text-sm">پیشنمایش HTML:</h3>
|
|
<pre class="bg-gray-100 dark:bg-gray-800 text-xs p-2 rounded overflow-auto text-gray-700 dark:text-gray-300">@Content</pre>
|
|
</div> *@
|
|
@* </div> *@
|
|
|
|
@code {
|
|
|
|
[Parameter]
|
|
public string Value { get; set; }
|
|
|
|
[Parameter]
|
|
public EventCallback<string> ValueChanged { get; set; }
|
|
|
|
|
|
[Parameter]
|
|
public string? Class { get; set; }
|
|
|
|
[Parameter]
|
|
public string? Id { get; set; }
|
|
|
|
|
|
|
|
private ElementReference EditorRef;
|
|
private string Content = "";
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
await base.OnInitializedAsync();
|
|
|
|
if(!String.IsNullOrEmpty(Value))
|
|
{
|
|
Content = Value;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
{
|
|
if(firstRender)
|
|
{
|
|
await JS.InvokeVoidAsync("setEditorContent", EditorRef, Content);
|
|
}
|
|
}
|
|
|
|
private async void ExecCmd(string command)
|
|
{
|
|
await JS.InvokeVoidAsync("document.execCommand", command, false, null);
|
|
await UpdateContent();
|
|
}
|
|
|
|
[JSInvokable]
|
|
private async Task UpdateContent()
|
|
{
|
|
|
|
Content = await JS.InvokeAsync<string>("getEditorContent", EditorRef);
|
|
StateHasChanged();
|
|
await ValueChanged.InvokeAsync(Content);
|
|
}
|
|
|
|
private async void Clear()
|
|
{
|
|
await JS.InvokeVoidAsync("clearEditor", EditorRef);
|
|
Content = "";
|
|
}
|
|
|
|
[Inject]
|
|
IJSRuntime JS { get; set; }
|
|
}
|
|
|
|
|
|
|
|
|