oqtane.framework/Oqtane.Client/Modules/HtmlText/Edit.razor

@using Oqtane.Modules.HtmlText.Services
@using Oqtane.Modules.HtmlText.Models
@using Oqtane.Modules.Controls
@namespace Oqtane.Modules.HtmlText
@inherits ModuleBase
@inject NavigationManager NavigationManager
@inject HttpClient http
@inject SiteState sitestate

<div class="row" style="margin-bottom: 50px;">
    <div class="col @_visibleText">
        <textarea class="form-control" @bind="@content" rows="10"></textarea>
    </div>

    <div class="col @_visibleRich">
        <RichTextEditor @ref="@RichTextEditorHtml">
            <ToolbarContent>
                <select class="ql-header">
                    <option selected=""></option>
                    <option value="1"></option>
                    <option value="2"></option>
                    <option value="3"></option>
                    <option value="4"></option>
                    <option value="5"></option>
                </select>
                <span class="ql-formats">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                </span>
                <span class="ql-formats">
                    <select class="ql-color"></select>
                    <select class="ql-background"></select>
                </span>
                <span class="ql-formats">
                    <button class="ql-list" value="ordered"></button>
                    <button class="ql-list" value="bullet"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-link"></button>
                </span>
            </ToolbarContent>
        </RichTextEditor>
    </div>
</div>

<div class="row">
    <div class="col">
        @if (!RichTextEditorMode)
        {
            <button type="button" class="btn btn-secondary" @onclick="RichTextEditor">Rich Text Editor</button>
        }
        else
        {
            <button type="button" class="btn btn-secondary" @onclick="RawHtmlEditor">Raw HTML Editor</button>
        }
        <button type="button" class="btn btn-success" @onclick="SaveContent">Save</button>        
        <NavLink class="btn btn-secondary" href="@NavigateUrl()">Cancel</NavLink>
    </div>
</div>

<div class="row">
    <div class="col">
        <AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
    </div>
</div>

@code {
    private string _visibleText = "d-none";
    private string _visibleRich;
    private bool _richTextEditorMode;
    private RichTextEditor RichTextEditorHtml;
    private string content;
    private string createdby;
    private DateTime createdon;
    private string modifiedby;
    private DateTime modifiedon;

    public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Edit;

    public override string Title => "Edit Html/Text";

    public bool RichTextEditorMode
    {
        get => _richTextEditorMode;
        set
        {
            _richTextEditorMode = value;
            
            if (_richTextEditorMode)
            {
                _visibleText = "d-none";
                _visibleRich = string.Empty;
            }
            else
            {
                _visibleText = string.Empty;
                _visibleRich = "d-none";
            }
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            if (firstRender)
            {
                if (content == null)
                {
                    RichTextEditorMode = true;
                    await LoadText();
                }
            }
        }
        catch (Exception ex)
        {
            await logger.LogError(ex, "An Error Occurred Loading Html/Text Content. " + ex.Message);
            AddModuleMessage(ex.Message, MessageType.Error);
        }
    }

    private async Task LoadText()
    {
        var htmltextservice = new HtmlTextService(http, sitestate);
        var htmltext = await htmltextservice.GetHtmlTextAsync(ModuleState.ModuleId);
        if (htmltext != null)
        {
            content = htmltext.Content;
            createdby = htmltext.CreatedBy;
            createdon = htmltext.CreatedOn;
            modifiedby = htmltext.ModifiedBy;
            modifiedon = htmltext.ModifiedOn;

            if (RichTextEditorMode)
            {
                await RichTextEditorHtml.LoadContent(content);
                StateHasChanged();
            }
        }
    }

    private async Task RichTextEditor()
    {
        RichTextEditorMode = true;
        await RichTextEditorHtml.LoadContent(content);
        StateHasChanged();
    }

    private async Task RawHtmlEditor()
    {
        content = await this.RichTextEditorHtml.GetHtml();
        RichTextEditorMode = false;
        StateHasChanged();
    }

    private async Task SaveContent()
    {
        if (RichTextEditorMode)
        {
            content = await RichTextEditorHtml.GetHtml();
        }

        content = content.Replace(((PageState.Alias.Path == string.Empty) ? "/~" : PageState.Alias.Path) + Constants.ContentUrl, Constants.ContentUrl);

        try
        {
            var htmltextservice = new HtmlTextService(http, sitestate);
            var htmltext = await htmltextservice.GetHtmlTextAsync(ModuleState.ModuleId);
            if (htmltext != null)
            {
                htmltext.Content = content;
                await htmltextservice.UpdateHtmlTextAsync(htmltext);
            }
            else
            {
                htmltext = new HtmlTextInfo();
                htmltext.ModuleId = ModuleState.ModuleId;
                htmltext.Content = content;
                await htmltextservice.AddHtmlTextAsync(htmltext);
            }
            
            await logger.LogInformation("Html/Text Content Saved {HtmlText}", htmltext);
            NavigationManager.NavigateTo(NavigateUrl());
        }
        catch (Exception ex)
        {
            await logger.LogError(ex, "Error Saving Content {Error}", ex.Message);
            AddModuleMessage("Error Saving Content", MessageType.Error);
        }
    }

}