SeemGen/Components/Partials/HtmlContentEditor.razor

86 lines
2.3 KiB
Plaintext

@using Microsoft.AspNetCore.Components.Forms
@* <InputTextArea @bind-Value="RawHtml" class="form-control" rows="10" /> *@
<RadzenHtmlEditor @bind-Value=@RawHtml style="height: 70vh; color:#000; background-color: transparent !important;" Input=@OnInput Change=@OnChange Paste=@OnPaste UploadComplete=@OnUploadComplete Execute=@OnExecute UploadUrl="upload/image">
<RadzenHtmlEditorUndo />
<RadzenHtmlEditorRedo />
<RadzenHtmlEditorSource />
</RadzenHtmlEditor>
<div class="mt-3 d-flex justify-content-end gap-2">
<button class="btn btn-primary" @onclick="OnSaveClicked">Save</button>
<button class="btn btn-secondary" @onclick="OnCancelClicked">Cancel</button>
</div>
@if (ShowPreview)
{
<div class="mt-4">
<h6>Live Preview:</h6>
<div class="border p-3 bg-light" style="min-height: 100px;" @key="RawHtml">
@((MarkupString)RawHtml)
</div>
</div>
}
@code {
[Parameter]
public string Html { get; set; } = string.Empty;
[Parameter]
public Func<string, Task> HtmlChanged { get; set; }
private string RawHtml = string.Empty;
private bool ShowPreview = false;
protected override void OnInitialized()
{
RawHtml = Html;
}
private async Task OnSaveClicked()
{
// await HtmlChanged.InvokeAsync(RawHtml);
if (HtmlChanged != null)
await HtmlChanged.Invoke(RawHtml);
}
private void OnCancelClicked()
{
RawHtml = Html;
}
async Task OnPaste(HtmlEditorPasteEventArgs args)
{
// console.Log($"Paste: {args.Html}");
// MenuItem.Content = args.Html;
// await OnContentUpdated.InvokeAsync(MenuItem);
}
async Task OnChange(string html)
{
// console.Log($"Change: {html}");
// MenuItem.Content = html;
// await OnContentUpdated.InvokeAsync(MenuItem);
}
async Task OnInput(string html)
{
// console.Log($"Input: {html}");
// MenuItem.Content = html;
// await OnContentUpdated.InvokeAsync(MenuItem);
}
void OnExecute(HtmlEditorExecuteEventArgs args)
{
//console.Log($"Execute: {args.CommandName}");
}
void OnUploadComplete(UploadCompleteEventArgs args)
{
//console.Log($"Upload complete: {args.RawResponse}");
}
}