diff --git a/Oqtane.Client/Modules/Controls/QuillTextEditor.razor b/Oqtane.Client/Modules/Controls/QuillTextEditor.razor index 5bb183b2..c64a5c6f 100644 --- a/Oqtane.Client/Modules/Controls/QuillTextEditor.razor +++ b/Oqtane.Client/Modules/Controls/QuillTextEditor.razor @@ -4,80 +4,132 @@ @inject IStringLocalizer Localizer
- @if (_richfilemanager) - { - - -
- } -
- @if (AllowFileManagement) + + @if (AllowRichText) { - - } - @if (_richfilemanager) - { - @((MarkupString)"  ") - - } -
-
-
-
- @if (ToolbarContent != null) + + @if (_richfilemanager) { - @ToolbarContent + + +
+ } +
+ @if (AllowFileManagement) + { + + } + @if (_richfilemanager) + { + @((MarkupString)"  ") + + } +
+
+
+
+ @if (ToolbarContent != null) + { + @ToolbarContent + } + else + { + + + + + + + + + + + + + + + + + + + } +
+
+
+
+ + } + @if (AllowRawHtml) + { + + @if (_rawfilemanager) + { + + +
+ } +
+ @if (AllowFileManagement) + { + + } + @if (_rawfilemanager) + { + @((MarkupString)"  ") + + } +
+ @if (ReadOnly) + { + } else { - - - - - - - - - - - - - - - - - - + } -
-
-
-
+ + } +
@code { - private bool _richfilemanager = false; + private bool _initialized = false; + + private QuillEditorInterop interop; private FileManager _fileManager; - private string _message = string.Empty; + private string _activetab = "Rich"; + private ElementReference _editorElement; private ElementReference _toolBar; - private QuillEditorInterop interop; - private int _editorIndex; + private bool _richfilemanager = false; private string _richhtml = string.Empty; private string _originalrichhtml = string.Empty; - private bool _initialized = false; + + private bool _rawfilemanager = false; + private string _rawhtmlid = "RawHtmlEditor_" + Guid.NewGuid().ToString("N"); + private string _rawhtml = string.Empty; + private string _originalrawhtml = string.Empty; + + private string _message = string.Empty; private bool _contentchanged = false; + private int _editorIndex; [Parameter] public bool AllowFileManagement{ get; set; } + [Parameter] + public bool AllowRichText { get; set; } = true; + + [Parameter] + public bool AllowRawHtml { get; set; } = true; + [Parameter] public bool ReadOnly { get; set; } @@ -85,10 +137,10 @@ public string Placeholder { get; set; } [Parameter] - public string Theme { get; set; } + public string Theme { get; set; } = "snow"; [Parameter] - public string DebugLevel { get; set; } + public string DebugLevel { get; set; } = "info"; [Parameter] public RenderFragment ToolbarContent { get; set; } @@ -103,59 +155,161 @@ protected override void OnInitialized() { interop = new QuillEditorInterop(JSRuntime); + + if (string.IsNullOrEmpty(Placeholder)) + { + Placeholder = Localizer["Placeholder"]; + } + } + + protected override void OnParametersSet() + { + if (!AllowRichText) + { + _activetab = "Raw"; + } } protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); - if (firstRender) + if (AllowRichText) { - 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 (firstRender) { - if (_contentchanged) + 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) { - // 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) + if (_contentchanged) { - _richhtml = richhtml; + // 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; + _contentchanged = false; + } } - public void Initialize(string content, bool updated) + public void Initialize(string content) { _richhtml = content; - _contentchanged = updated; + _rawhtml = content; + _originalrawhtml = _rawhtml; // preserve for comparison later + _originalrichhtml = ""; + _richhtml = content; + _contentchanged = content != _originalrawhtml; + + StateHasChanged(); + } + + public async Task GetContent() + { + // evaluate raw html content as first priority + if (_rawhtml != _originalrawhtml) + { + return _rawhtml; + } + else + { + var richhtml = ""; + + if (AllowRichText) + { + richhtml = await interop.GetHtml(_editorElement); + } + + if (richhtml != _originalrichhtml && !string.IsNullOrEmpty(richhtml)) + { + // convert Quill's empty content to empty string + if (richhtml == "


") + { + richhtml = string.Empty; + } + return richhtml; + } + else + { + // return original raw html content + return _originalrawhtml; + } + } + } + + public void CloseRichFileManager() + { + _richfilemanager = false; + _message = string.Empty; + StateHasChanged(); + } + + public void CloseRawFileManager() + { + _rawfilemanager = false; + _message = string.Empty; + StateHasChanged(); + } + + public async Task GetHtml() + { + // evaluate raw html content as first priority + if (_rawhtml != _originalrawhtml) + { + return _rawhtml; + } + else + { + var richhtml = ""; + + if (AllowRichText) + { + richhtml = await interop.GetHtml(_editorElement); + } + + if (richhtml != _originalrichhtml && !string.IsNullOrEmpty(richhtml)) + { + // convert Quill's empty content to empty string + if (richhtml == "


") + { + richhtml = string.Empty; + } + return richhtml; + } + else + { + // return original raw html content + return _originalrawhtml; + } + } } public async Task InsertRichImage() @@ -183,28 +337,29 @@ StateHasChanged(); } - public void CloseRichFileManager() + public async Task InsertRawImage() { - _richfilemanager = false; _message = string.Empty; - StateHasChanged(); - } - - public async Task GetContent() - { - var richhtml = await interop.GetHtml(_editorElement); - if (richhtml != _originalrichhtml && !string.IsNullOrEmpty(richhtml)) + if (_rawfilemanager) { - // convert Quill's empty content to empty string - if (richhtml == "


") + var file = _fileManager.GetFile(); + if (file != null) { - richhtml = string.Empty; + var interop = new Interop(JSRuntime); + int pos = await interop.GetCaretPosition(_rawhtmlid); + var image = "\"""; + _rawhtml = _rawhtml.Substring(0, pos) + image + _rawhtml.Substring(pos); + _rawfilemanager = false; + } + else + { + _message = Localizer["Message.Require.Image"]; } - return richhtml; } else { - return null; + _rawfilemanager = true; } + StateHasChanged(); } } diff --git a/Oqtane.Client/Modules/Controls/RichTextEditor.razor b/Oqtane.Client/Modules/Controls/RichTextEditor.razor index 907fff94..52d03be8 100644 --- a/Oqtane.Client/Modules/Controls/RichTextEditor.razor +++ b/Oqtane.Client/Modules/Controls/RichTextEditor.razor @@ -9,57 +9,11 @@
- - @if (AllowRichText) - { - - @_textEditorComponent - - } - @if (AllowRawHtml) - { - - @if (_rawfilemanager) - { - - -
- } -
- @if (AllowFileManagement) - { - - } - @if (_rawfilemanager) - { - @((MarkupString)"  ") - - } -
- @if (ReadOnly) - { - - } - else - { - - } - - } - + @_textEditorComponent
@code { - private string _activetab = "Rich"; - - 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 ITextEditorProvider _textEditorProvider; private RenderFragment _textEditorComponent; private ITextEditor _textEditor; @@ -87,36 +41,20 @@ public RenderFragment ToolbarContent { get; set; } [Parameter] - public string Theme { get; set; } = "snow"; + public string Theme { get; set; } [Parameter] - public string DebugLevel { get; set; } = "info"; + public string DebugLevel { get; set; } public override List Resources { get; set; } = new List(); protected override async Task OnInitializedAsync() { - if (string.IsNullOrEmpty(Placeholder)) - { - Placeholder = Localizer["Placeholder"]; - } - - if(AllowRichText) - { - _textEditorProvider = await GetTextEditorProvider(); - } + _textEditorProvider = await GetTextEditorProvider(); } protected override void OnParametersSet() { - _rawhtml = Content; - _originalrawhtml = _rawhtml; // preserve for comparison later - - if (!AllowRichText) - { - _activetab = "Raw"; - } - _textEditorComponent = (builder) => { CreateTextEditor(builder); @@ -127,64 +65,15 @@ { if(_textEditor != null) { - _textEditor.Initialize(Content, Content != _originalrawhtml); + _textEditor.Initialize(Content); } await base.OnAfterRenderAsync(firstRender); } - - public void CloseRawFileManager() - { - _rawfilemanager = false; - _message = string.Empty; - StateHasChanged(); - } - public async Task GetHtml() { - // evaluate raw html content as first priority - if (_rawhtml != _originalrawhtml) - { - return _rawhtml; - } - else - { - var richhtml = string.Empty; - if (AllowRichText && _textEditor != null) - { - richhtml = await _textEditor.GetContent(); - } - - return richhtml != null ? richhtml : _originalrawhtml; - } - } - - - public async Task InsertRawImage() - { - _message = string.Empty; - if (_rawfilemanager) - { - var file = _fileManager.GetFile(); - if (file != null) - { - var interop = new Interop(JSRuntime); - int pos = await interop.GetCaretPosition(_rawhtmlid); - var image = "\"""; - _rawhtml = _rawhtml.Substring(0, pos) + image + _rawhtml.Substring(pos); - _rawfilemanager = false; - } - else - { - _message = Localizer["Message.Require.Image"]; - } - } - else - { - _rawfilemanager = true; - } - StateHasChanged(); + return await _textEditor.GetContent(); } private void CreateTextEditor(RenderTreeBuilder builder) @@ -200,13 +89,28 @@ var attributes = new Dictionary { { "AllowFileManagement", AllowFileManagement }, - { "ReadOnly", ReadOnly }, - { "Placeholder", Placeholder }, - { "Theme", Theme }, - { "DebugLevel", DebugLevel }, - { "ToolbarContent", ToolbarContent } + { "AllowRichText", AllowRichText }, + { "AllowRawHtml", AllowRawHtml }, + { "ReadOnly", ReadOnly } }; + if(!string.IsNullOrEmpty(Theme)) + { + attributes.Add("Theme", Theme); + } + if (!string.IsNullOrEmpty(DebugLevel)) + { + attributes.Add("DebugLevel", DebugLevel); + } + if (!string.IsNullOrEmpty(Placeholder)) + { + attributes.Add("Placeholder", Placeholder); + } + if(ToolbarContent != null) + { + attributes.Add("ToolbarContent", ToolbarContent); + } + var index = 1; foreach(var name in attributes.Keys) { diff --git a/Oqtane.Client/Resources/Modules/Controls/QuillTextEditor.resx b/Oqtane.Client/Resources/Modules/Controls/QuillTextEditor.resx index 5ac2f720..e8180682 100644 --- a/Oqtane.Client/Resources/Modules/Controls/QuillTextEditor.resx +++ b/Oqtane.Client/Resources/Modules/Controls/QuillTextEditor.resx @@ -117,13 +117,16 @@ System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 - - Insert Image - Close + + Insert Image + You Must Select An Image To Insert + + Enter Your Content... + \ No newline at end of file diff --git a/Oqtane.Client/Resources/Modules/Controls/RichTextEditor.resx b/Oqtane.Client/Resources/Modules/Controls/RichTextEditor.resx deleted file mode 100644 index 4e2b64c5..00000000 --- a/Oqtane.Client/Resources/Modules/Controls/RichTextEditor.resx +++ /dev/null @@ -1,132 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - text/microsoft-resx - - - 2.0 - - - System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 - - - System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 - - - Insert Image - - - Close - - - You Must Select An Image To Insert - - - Enter Your Content... - - \ No newline at end of file diff --git a/Oqtane.Shared/Interfaces/ITextEditor.cs b/Oqtane.Shared/Interfaces/ITextEditor.cs index 8ebc32c4..67f4efab 100644 --- a/Oqtane.Shared/Interfaces/ITextEditor.cs +++ b/Oqtane.Shared/Interfaces/ITextEditor.cs @@ -11,7 +11,7 @@ namespace Oqtane.Interfaces /// initializes the editor with the initialize content. /// /// the initialize content. - void Initialize(string content, bool updated); + void Initialize(string content); /// /// get content from the editor.