Fix #4316: add text editor interfaces.

Oqtane.Client/Modules/Controls/QuillEditorInterop.cs

@@ -4,11 +4,11 @@ using System.Threading.Tasks;
 
 namespace Oqtane.Modules.Controls
 {
-    public class RichTextEditorInterop
+    public class QuillEditorInterop
     {
         private readonly IJSRuntime _jsRuntime;
 
-        public RichTextEditorInterop(IJSRuntime jsRuntime)
+        public QuillEditorInterop(IJSRuntime jsRuntime)
         {
             _jsRuntime = jsRuntime;
         }

Oqtane.Client/Modules/Controls/QuillTextEditor.razor

@@ -0,0 +1,210 @@
+@namespace Oqtane.Modules.Controls
+@inherits ModuleControlBase
+@implements ITextEditor
+@inject IStringLocalizer<QuillTextEditor> Localizer
+
+<div class="quill-text-editor">
+    @if (_richfilemanager)
+    {
+        <FileManager @ref="_fileManager" Filter="@PageState.Site.ImageFiles" />
+        <ModuleMessage Message="@_message" Type="MessageType.Warning"></ModuleMessage>
+        <br />
+    }
+    <div class="d-flex justify-content-center mb-2">
+        @if (AllowFileManagement)
+        {
+            <button type="button" class="btn btn-primary" @onclick="InsertRichImage">@Localizer["InsertImage"]</button>
+        }
+        @if (_richfilemanager)
+        {
+            @((MarkupString)"&nbsp;&nbsp;")
+            <button type="button" class="btn btn-secondary" @onclick="CloseRichFileManager">@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>
+</div>
+
+@code {
+    private bool _richfilemanager = false;
+    private FileManager _fileManager;
+    private string _message = string.Empty;
+    private ElementReference _editorElement;
+    private ElementReference _toolBar;
+    private QuillEditorInterop interop;
+    private int _editorIndex;
+    private string _richhtml = string.Empty;
+    private string _originalrichhtml = string.Empty;
+    private bool _initialized = false;
+    private bool _contentchanged = false;
+
+    [Parameter]
+    public bool AllowFileManagement{ get; set; }
+
+    [Parameter]
+    public bool ReadOnly { get; set; }
+
+    [Parameter]
+    public string Placeholder { get; set; }
+
+    [Parameter]
+    public string Theme { get; set; }
+
+    [Parameter]
+    public string DebugLevel { get; set; }
+
+    [Parameter]
+    public RenderFragment ToolbarContent { get; set; }
+
+    public override List<Resource> Resources { get; set; } = new List<Resource>()
+    {
+        new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill.min.js", Location = ResourceLocation.Body },
+        new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-blot-formatter.min.js", Location = ResourceLocation.Body },
+        new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-interop.js", Location = ResourceLocation.Body }
+    };
+
+    protected override void OnInitialized()
+    {
+        interop = new QuillEditorInterop(JSRuntime);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            await interop.CreateEditor(
+                _editorElement,
+                _toolBar,
+                ReadOnly,
+                Placeholder,
+                Theme,
+                DebugLevel);
+
+            await interop.LoadEditorContent(_editorElement, _richhtml);
+
+            // preserve a copy of the content (Quill sanitizes content so we need to retrieve it from the editor as it may have been modified)
+            _originalrichhtml = await interop.GetHtml(_editorElement);
+
+            _initialized = true;
+        }
+        else
+        {
+            if (_initialized)
+            {
+                if (_contentchanged)
+                {
+                    // reload editor if Content passed to component has changed
+                    await interop.LoadEditorContent(_editorElement, _richhtml);
+                    _originalrichhtml = await interop.GetHtml(_editorElement);
+                }
+                else
+                {
+                    // preserve changed content on re-render event
+                    var richhtml = await interop.GetHtml(_editorElement);
+                    if (richhtml != _richhtml)
+                    {
+                        _richhtml = richhtml;
+                        await interop.LoadEditorContent(_editorElement, _richhtml);
+                    }
+                }
+            }
+        }
+
+        _contentchanged = false;
+    }
+
+    public void Initialize(string content, bool updated)
+    {
+        _richhtml = content;
+        _contentchanged = updated;
+    }
+
+    public async Task InsertRichImage()
+    {
+        _message = string.Empty;
+        if (_richfilemanager)
+        {
+            var file = _fileManager.GetFile();
+            if (file != null)
+            {
+                await interop.InsertImage(_editorElement, file.Url, ((!string.IsNullOrEmpty(file.Description)) ? file.Description : file.Name), _editorIndex);
+                _richhtml = await interop.GetHtml(_editorElement);
+                _richfilemanager = false;
+            }
+            else
+            {
+                _message = Localizer["Message.Require.Image"];
+            }
+        }
+        else
+        {
+            _editorIndex = await interop.GetCurrentCursor(_editorElement);
+            _richfilemanager = true;
+        }
+        StateHasChanged();
+    }
+
+    public void CloseRichFileManager()
+    {
+        _richfilemanager = false;
+        _message = string.Empty;
+        StateHasChanged();
+    }
+
+    public async Task<string> GetContent()
+    {
+        var richhtml = await interop.GetHtml(_editorElement);
+        if (richhtml != _originalrichhtml && !string.IsNullOrEmpty(richhtml))
+        {
+            // convert Quill's empty content to empty string
+            if (richhtml == "<p><br></p>")
+            {
+                richhtml = string.Empty;
+            }
+            return richhtml;
+        }
+        else
+        {
+            return null;
+        }
+    }
+}

Oqtane.Client/Modules/Controls/RichTextEditor.razor

@@ -1,6 +1,9 @@
 @using System.Text.RegularExpressions
+@using Microsoft.AspNetCore.Components.Rendering
+@using Microsoft.Extensions.DependencyInjection
 @namespace Oqtane.Modules.Controls
 @inherits ModuleControlBase
+@inject IServiceProvider ServiceProvider
 @inject ISettingService SettingService
 @inject IStringLocalizer<RichTextEditor> Localizer 
 
@@ -10,62 +13,7 @@
 			@if (AllowRichText)
             {
                 <TabPanel Name="Rich" Heading="Rich Text Editor" ResourceKey="RichTextEditor">
-                    @if (_richfilemanager)
+                    @_textEditorComponent
-                    {
-                        <FileManager @ref="_fileManager" Filter="@PageState.Site.ImageFiles" />
-                        <ModuleMessage Message="@_message" Type="MessageType.Warning"></ModuleMessage>
-                        <br />
-                    }
-                    <div class="d-flex justify-content-center mb-2">
-                        @if (AllowFileManagement)
-                        {
-                            <button type="button" class="btn btn-primary" @onclick="InsertRichImage">@Localizer["InsertImage"]</button>
-                        }
-                        @if (_richfilemanager)
-                        {
-                            @((MarkupString)"&nbsp;&nbsp;")
-                            <button type="button" class="btn btn-secondary" @onclick="CloseRichFileManager">@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>
             }
 			@if (AllowRawHtml)
@@ -103,26 +51,18 @@
 </div>
 
 @code {
-    private bool _initialized = false;
-
-    private RichTextEditorInterop interop;
-    private FileManager _fileManager;
     private string _activetab = "Rich";
 
-    private ElementReference _editorElement;
-    private ElementReference _toolBar;
-    private bool _richfilemanager = false;
-    private string _richhtml = string.Empty;
-    private string _originalrichhtml = string.Empty;
-
     private bool _rawfilemanager = false;
+    private FileManager _fileManager;
+    private string _message = string.Empty;
     private string _rawhtmlid = "RawHtmlEditor_" + Guid.NewGuid().ToString("N");
     private string _rawhtml = string.Empty;
     private string _originalrawhtml = string.Empty;
 
-    private string _message = string.Empty;
+    private ITextEditorProvider _textEditorProvider;
-    private bool _contentchanged = false;
+    private RenderFragment _textEditorComponent;
-    private int _editorIndex;
+    private ITextEditor _textEditor;
 
     [Parameter]
     public string Content { get; set; }
@@ -152,96 +92,47 @@
     [Parameter]
     public string DebugLevel { get; set; } = "info";
 
-    public override List<Resource> Resources => new List<Resource>()
+    public override List<Resource> Resources { get; set; } = new List<Resource>();
-    {
-        new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill.min.js", Location = ResourceLocation.Body },
-        new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-blot-formatter.min.js", Location = ResourceLocation.Body },
-        new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-interop.js", Location = ResourceLocation.Body }
-    };
 
-    protected override void OnInitialized()
+    protected override async Task OnInitializedAsync()
     {
-        interop = new RichTextEditorInterop(JSRuntime);
         if (string.IsNullOrEmpty(Placeholder))
         {
             Placeholder = Localizer["Placeholder"];
         }
+
+        if(AllowRichText)
+        {
+            _textEditorProvider = await GetTextEditorProvider();
+        }
     }
 
     protected override void OnParametersSet()
     {
-        _richhtml = Content;
         _rawhtml = Content;
         _originalrawhtml = _rawhtml; // preserve for comparison later
-        _originalrichhtml = "";
-
-        if (Content != _originalrawhtml)
-        {
-            _contentchanged = true; // identifies when Content parameter has changed
-        }
 
         if (!AllowRichText)
         {
             _activetab = "Raw";
         }
+
+        _textEditorComponent = (builder) =>
+        {
+            CreateTextEditor(builder);
+        };
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        await base.OnAfterRenderAsync(firstRender);
+        if(_textEditor != null)
-
-        if (AllowRichText)
         {
-            if (firstRender)
+            _textEditor.Initialize(Content, Content != _originalrawhtml);
-            {
-                await interop.CreateEditor(
-                    _editorElement,
-                    _toolBar,
-                    ReadOnly,
-                    Placeholder,
-                    Theme,
-                    DebugLevel);
-
-                await interop.LoadEditorContent(_editorElement, _richhtml);
-
-                // preserve a copy of the content (Quill sanitizes content so we need to retrieve it from the editor as it may have been modified)
-                _originalrichhtml = await interop.GetHtml(_editorElement);
-
-                _initialized = true;
-            }
-            else
-            {
-                if (_initialized)
-                {
-                    if (_contentchanged)
-                    {
-                        // reload editor if Content passed to component has changed
-                        await interop.LoadEditorContent(_editorElement, _richhtml);
-                        _originalrichhtml = await interop.GetHtml(_editorElement);
-                    }
-                    else
-                    {
-                        // preserve changed content on re-render event
-                        var richhtml = await interop.GetHtml(_editorElement);
-                        if (richhtml != _richhtml)
-                        {
-                            _richhtml = richhtml;
-                            await interop.LoadEditorContent(_editorElement, _richhtml);
-                        }
-                    }
-                }
-            }
-
-            _contentchanged = false;
         }
+
+        await base.OnAfterRenderAsync(firstRender);
     }
 
-    public void CloseRichFileManager()
-    {
-        _richfilemanager = false;
-        _message = string.Empty;
-        StateHasChanged();
-    }
 
     public void CloseRawFileManager()
     {
@@ -259,78 +150,101 @@
         }
         else
         {
-            var richhtml = "";
+            var richhtml = string.Empty;
-
+            if (AllowRichText && _textEditor != null)
-            if (AllowRichText)
             {
-                richhtml = await interop.GetHtml(_editorElement);
+                richhtml = await _textEditor.GetContent();
             }
 
-            if (richhtml != _originalrichhtml && !string.IsNullOrEmpty(richhtml))
+            return richhtml != null ? richhtml : _originalrawhtml;
+        }
+    }
+
+
+    public async Task InsertRawImage()
+    {
+        _message = string.Empty;
+        if (_rawfilemanager)
+        {
+            var file = _fileManager.GetFile();
+            if (file != null)
             {
-                // convert Quill's empty content to empty string
+                var interop = new Interop(JSRuntime);
-                if (richhtml == "<p><br></p>")
+                int pos = await interop.GetCaretPosition(_rawhtmlid);
-                {
+                var image = "<img src=\"" + file.Url + "\" alt=\"" + ((!string.IsNullOrEmpty(file.Description)) ? file.Description : file.Name) + "\" class=\"img-fluid\">";
-                    richhtml = string.Empty;
+                _rawhtml = _rawhtml.Substring(0, pos) + image + _rawhtml.Substring(pos);
-                }
+                _rawfilemanager = false;
-                return richhtml;
             }
             else
             {
-                // return original raw html content
+                _message = Localizer["Message.Require.Image"];
-                return _originalrawhtml;
+            }
+        }
+        else
+        {
+            _rawfilemanager = true;
+        }
+        StateHasChanged();
+    }
+
+    private void CreateTextEditor(RenderTreeBuilder builder)
+    {
+        if(_textEditorProvider != null)
+        {
+            var editorType = Type.GetType(_textEditorProvider.EditorType);
+            if (editorType != null)
+            {
+                builder.OpenComponent(0, editorType);
+
+                //set editor parameters if available.
+                var attributes = new Dictionary<string, object>
+                {
+                    { "AllowFileManagement", AllowFileManagement },
+                    { "ReadOnly", ReadOnly },
+                    { "Placeholder", Placeholder },
+                    { "Theme", Theme },
+                    { "DebugLevel", DebugLevel },
+                    { "ToolbarContent", ToolbarContent }
+                };
+
+                var index = 1;
+                foreach(var name in attributes.Keys)
+                {
+                    if (editorType.GetProperty(name) != null)
+                    {
+                        builder.AddAttribute(index++, name, attributes[name]);
+                    }
+                }
+
+                builder.AddComponentReferenceCapture(index, (c) =>
+                {
+                    _textEditor = (ITextEditor)c;
+                });
+                builder.CloseComponent();
             }
         }
     }
 
-    public async Task InsertRichImage()
+    private async Task<ITextEditorProvider> GetTextEditorProvider()
     {
-        _message = string.Empty;
+        const string DefaultEditorName = "Quill";
-        if (_richfilemanager)
-        {            
-            var file = _fileManager.GetFile();
-			if (file != null)
-			{
-                await interop.InsertImage(_editorElement, file.Url, ((!string.IsNullOrEmpty(file.Description)) ? file.Description : file.Name), _editorIndex);
-                _richhtml = await interop.GetHtml(_editorElement);
-                _richfilemanager = false;
-			}
-			else
-			{
-				_message = Localizer["Message.Require.Image"];
-			}
-		}
-		else
-		{
-            _editorIndex = await interop.GetCurrentCursor(_editorElement);
-			_richfilemanager = true;
-		}
-		StateHasChanged();
-	}
 
-	public async Task InsertRawImage()
+        var editorName = await GetTextEditorName(DefaultEditorName);
-	{
+        var editorProviders = ServiceProvider.GetServices<ITextEditorProvider>();
-		_message = string.Empty;
+        var editorProvider = editorProviders.FirstOrDefault(i => i.Name == editorName);
-		if (_rawfilemanager)
+        if(editorProvider == null)
-		{
+        {
-			var file = _fileManager.GetFile();
+            editorProvider = editorProviders.FirstOrDefault(i => i.Name == DefaultEditorName);
-			if (file != null)
+        }
-			{
+
-				var interop = new Interop(JSRuntime);
+        return editorProvider;
-                int pos = await interop.GetCaretPosition(_rawhtmlid);
+    }
-				var image = "<img src=\"" + file.Url + "\" alt=\"" + ((!string.IsNullOrEmpty(file.Description)) ? file.Description : file.Name) + "\" class=\"img-fluid\">";
+
-				_rawhtml = _rawhtml.Substring(0, pos) + image + _rawhtml.Substring(pos);
+    private async Task<string> GetTextEditorName(string defaultName)
-				_rawfilemanager = false;
+    {
-			}
+        const string EditorSettingName = "TextEditor";
-			else
+
-			{
+        var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
-				_message = Localizer["Message.Require.Image"];
+        return SettingService.GetSetting(settings, EditorSettingName, defaultName);
-			}
+    }
-		}
-		else
-		{
-			_rawfilemanager = true;
-		}
-		StateHasChanged();
-	}
 }

Oqtane.Client/Providers/QuillTextEditorProvider.cs

@@ -0,0 +1,11 @@
+using Oqtane.Interfaces;
+
+namespace Oqtane.Providers
+{
+    public class QuillTextEditorProvider : ITextEditorProvider
+    {
+        public string Name => "Quill";
+
+        public string EditorType => "Oqtane.Modules.Controls.QuillTextEditor, Oqtane.Client";
+    }
+}

Oqtane.Client/Resources/Modules/Controls/QuillTextEditor.resx

@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="InsertImage" xml:space="preserve">
+    <value>Insert Image</value>
+  </data>
+  <data name="Close" xml:space="preserve">
+    <value>Close</value>
+  </data>
+  <data name="Message.Require.Image" xml:space="preserve">
+    <value>You Must Select An Image To Insert</value>
+  </data>
+</root>

Oqtane.Server/Extensions/OqtaneServiceCollectionExtensions.cs

@@ -19,6 +19,7 @@ using Microsoft.Extensions.Logging;
 using Microsoft.OpenApi.Models;
 using Oqtane.Infrastructure;
 using Oqtane.Infrastructure.Interfaces;
+using Oqtane.Interfaces;
 using Oqtane.Managers;
 using Oqtane.Modules;
 using Oqtane.Providers;
@@ -101,6 +102,7 @@ namespace Microsoft.Extensions.DependencyInjection
             services.AddScoped<ISearchResultsService, SearchResultsService>();
             services.AddScoped<ISearchService, SearchService>();
             services.AddScoped<ISearchProvider, DatabaseSearchProvider>();
+            
 
             return services;
         }
@@ -148,6 +150,9 @@ namespace Microsoft.Extensions.DependencyInjection
             services.AddTransient<IUpgradeManager, UpgradeManager>();
             services.AddTransient<IUserManager, UserManager>();
 
+            // providers
+            services.AddTransient<ITextEditorProvider, QuillTextEditorProvider>();
+
             // obsolete - replaced by ITenantManager
             services.AddTransient<ITenantResolver, TenantResolver>();
 

Oqtane.Shared/Interfaces/ITextEditor.cs

@@ -0,0 +1,22 @@
+using System.Threading.Tasks;
+
+namespace Oqtane.Interfaces
+{
+    /// <summary>
+    /// Text editor interface.
+    /// </summary>
+    public interface ITextEditor
+    {
+        /// <summary>
+        /// initializes the editor with the initialize content.
+        /// </summary>
+        /// <param name="content">the initialize content.</param>
+        void Initialize(string content, bool updated); 
+
+        /// <summary>
+        /// get content from the editor.
+        /// </summary>
+        /// <returns></returns>
+        Task<string> GetContent();
+    }
+}

Oqtane.Shared/Interfaces/ITextEditorProvider.cs

@@ -0,0 +1,18 @@
+namespace Oqtane.Interfaces
+{
+    /// <summary>
+    /// Rich text editor provider interface.
+    /// </summary>
+    public interface ITextEditorProvider
+    {
+        /// <summary>
+        /// The text editor provider name.
+        /// </summary>
+        string Name { get; }
+
+        /// <summary>
+        /// The text editor type full name.
+        /// </summary>
+        string EditorType { get; }
+    }
+}