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 {

    public override SecurityAccessLevel SecurityAccessLevel
    {
        get { return SecurityAccessLevel.Edit; }
    }

    public override string Title
    {
        get { return "Edit Html/Text"; }
    }

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

    string _visibleText = "d-none";
    string _visibleRich;
    bool _richTextEditorMode;

    RichTextEditor RichTextEditorHtml;
    string content;
    string createdby;
    DateTime createdon;
    string modifiedby;
    DateTime modifiedon;

    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()
    {
        HtmlTextService htmltextservice = new HtmlTextService(http, sitestate, NavigationManager);
        HtmlTextInfo 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 == "") ? "/~" : PageState.Alias.Path) + Constants.ContentUrl, Constants.ContentUrl);

        try
        {
            HtmlTextService htmltextservice = new HtmlTextService(http, sitestate, NavigationManager);
            HtmlTextInfo 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);
        }
    }

}