oqtane.framework/Oqtane.Client/Modules/Controls/RichTextEditor.razor

@namespace Oqtane.Modules.Controls
@inherits ModuleControlBase
@inject IStringLocalizer<RichTextEditor> Localizer 

<div class="row" style="margin-bottom: 50px;">
    <div class="col">
        <TabStrip>
            <TabPanel Name="Rich" Heading="Rich Text Editor">
                @if (AllowFileManagement)
                {
                    @if (_filemanagervisible)
                    {
                        <FileManager @ref="_fileManager" Filter="@Constants.ImageFiles" />
                        <ModuleMessage Message="@_message" Type="MessageType.Warning"></ModuleMessage>
                        <br />
                    }
                    <div class="d-flex justify-content-center mb-2">
                        <button type="button" class="btn btn-secondary" @onclick="RefreshRichText">@Localizer["SynchronizeContent"]</button>&nbsp;&nbsp;
                        <button type="button" class="btn btn-primary" @onclick="InsertImage">@Localizer["InsertImage"]</button>
                        @if (_filemanagervisible)
                        {
                            @((MarkupString)"&nbsp;&nbsp;")
                            <button type="button" class="btn btn-secondary" @onclick="CloseFileManager">@Localizer["Close"]</button>
                        }
                    </div>
                }
                <div class="row">
                    <div class="col">
                        <div @ref="@_toolBar">
                            @if (ToolbarContent != null)
                            {
                                @ToolbarContent
                            }
                            else
                            {
                                <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>
                            }
                        </div>
                        <div @ref="@_editorElement">
                        </div>
                    </div>
                </div>
            </TabPanel>
            <TabPanel Name="Raw" Heading="Raw HTML Editor" ResourceKey="HtmlEditor">
                <div class="d-flex justify-content-center mb-2">
                    <button type="button" class="btn btn-secondary" @onclick="RefreshRawHtml">@Localizer["SynchronizeContent"]</button>
                </div>
                @if (ReadOnly)
                {
                    <textarea class="form-control" placeholder="@Placeholder" @bind="@_rawhtml" rows="10" readonly></textarea>
                }
                else
                {
                    <textarea class="form-control" placeholder="@Placeholder" @bind="@_rawhtml" rows="10"></textarea>
                }
            </TabPanel>
        </TabStrip>
    </div>
</div>

@code {
	private ElementReference _editorElement;
	private ElementReference _toolBar;
	private bool _filemanagervisible = false;
	private FileManager _fileManager;
	private string _richhtml = string.Empty;
	private string _originalrichhtml = string.Empty;
	private string _rawhtml = string.Empty;
	private string _originalrawhtml = string.Empty;
	private string _message = string.Empty;

	[Parameter]
	public string Content { get; set; }

	[Parameter]
	public bool ReadOnly { get; set; } = false;

	[Parameter]
	public string Placeholder { get; set; } = "Enter Your Content...";

	// parameters only applicable to rich text editor
	[Parameter]
	public RenderFragment ToolbarContent { get; set; }

	[Parameter]
	public string Theme { get; set; } = "snow";

	[Parameter]
	public string DebugLevel { get; set; } = "info";

	[Parameter]
	public bool AllowFileManagement { get; set; } = true;

	public override List<Resource> Resources => new List<Resource>()
    {
        new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill.min.js" },
        new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-blot-formatter.min.js" },
        new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-interop.js" }
    };

	protected override void OnParametersSet()
	{
		_richhtml = Content;
		_rawhtml = Content;
		_originalrawhtml = _rawhtml; // preserve for comparison later
	}

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		await base.OnAfterRenderAsync(firstRender);

		var interop = new RichTextEditorInterop(JSRuntime);

		if (firstRender)
		{
			await interop.CreateEditor(
				_editorElement,
				_toolBar,
				ReadOnly,
				Placeholder,
				Theme,
				DebugLevel);

			await interop.LoadEditorContent(_editorElement, _richhtml);

			// preserve a copy of the rich text content (Quill sanitizes content so we need to retrieve it from the editor)
			_originalrichhtml = await interop.GetHtml(_editorElement);
		}
		else
		{
			await interop.LoadEditorContent(_editorElement, _richhtml);	
		}
	}

	public void CloseFileManager()
	{
		_filemanagervisible = false;
		_message = string.Empty;
		StateHasChanged();
	}

	public void RefreshRichText()
	{
		_richhtml = _rawhtml;
		StateHasChanged();
	}

	public async Task RefreshRawHtml()
	{
		var interop = new RichTextEditorInterop(JSRuntime);
		_rawhtml = await interop.GetHtml(_editorElement);
		StateHasChanged();
	}

	public async Task<string> GetHtml()
	{
		// evaluate raw html content as first priority
		if (_rawhtml != _originalrawhtml)
		{
			return _rawhtml;
		}
		else
		{
			// return rich text content if it has changed
			var interop = new RichTextEditorInterop(JSRuntime);
			var richhtml = await interop.GetHtml(_editorElement);
			if (richhtml != _originalrichhtml)
			{
				return richhtml;
			}
			else
			{
				// return original raw html content
				return _originalrawhtml;
			}
		}
    }

    public async Task InsertImage()
    {
        _message = string.Empty;
        if (_filemanagervisible)
        {
            var file = _fileManager.GetFile();
            if (file != null)
            {
                var interop = new RichTextEditorInterop(JSRuntime);
                await interop.InsertImage(_editorElement, file.Url, file.Name);
                _filemanagervisible = false;
            }
            else
            {
                _message = Localizer["Message.Require.Image"];
            }
        }
        else
        {
            _filemanagervisible = true;
        }
        StateHasChanged();
    }
}