diff --git a/Oqtane.Client/Modules/Controls/RichTextEditor.razor b/Oqtane.Client/Modules/Controls/RichTextEditor.razor index 1e31db60..a67eb421 100644 --- a/Oqtane.Client/Modules/Controls/RichTextEditor.razor +++ b/Oqtane.Client/Modules/Controls/RichTextEditor.razor @@ -5,79 +5,100 @@
- - @if (AllowFileManagement) - { - @if (_filemanagervisible) - { - - -
- } -
-    - - @if (_filemanagervisible) - { - @((MarkupString)"  ") - - } -
- } -
-
-
- @if (ToolbarContent != null) - { - @ToolbarContent - } - else - { - - - - - - - - - - - - - - - - - - - } -
-
-
-
-
- - -
- -
- @if (ReadOnly) - { - - } - else - { - - } - + + @if (_richfilemanager) + { + + +
+ } +
+ @if (AllowRawHtml) + { + @((MarkupString)"  ") + } + @if (AllowFileManagement) + { + + } + @if (_richfilemanager) + { + @((MarkupString)"  ") + + } +
+
+
+
+ @if (ToolbarContent != null) + { + @ToolbarContent + } + else + { + + + + + + + + + + + + + + + + + + + } +
+
+
+
+
+ + @if (AllowRawHtml) + { + + @if (_rawfilemanager) + { + + +
+ } +
+    + @if (AllowFileManagement) + { + + } + @if (_rawfilemanager) + { + @((MarkupString)"  ") + + } +
+ @if (ReadOnly) + { + + } + else + { + + } + + }
@@ -85,10 +106,11 @@ @code { private ElementReference _editorElement; private ElementReference _toolBar; - private bool _filemanagervisible = false; + private bool _richfilemanager = false; private FileManager _fileManager; private string _richhtml = string.Empty; private string _originalrichhtml = string.Empty; + private bool _rawfilemanager = false; private string _rawhtml = string.Empty; private string _originalrawhtml = string.Empty; private string _message = string.Empty; @@ -102,6 +124,12 @@ [Parameter] public string Placeholder { get; set; } = "Enter Your Content..."; + [Parameter] + public bool AllowFileManagement { get; set; } = true; + + [Parameter] + public bool AllowRawHtml { get; set; } = true; + // parameters only applicable to rich text editor [Parameter] public RenderFragment ToolbarContent { get; set; } @@ -112,9 +140,6 @@ [Parameter] public string DebugLevel { get; set; } = "info"; - [Parameter] - public bool AllowFileManagement { get; set; } = true; - public override List Resources => new List() { new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill.min.js" }, @@ -152,9 +177,16 @@ } } - public void CloseFileManager() + public void CloseRichFileManager() { - _filemanagervisible = false; + _richfilemanager = false; + _message = string.Empty; + StateHasChanged(); + } + + public void CloseRawFileManager() + { + _rawfilemanager = false; _message = string.Empty; StateHasChanged(); } @@ -194,29 +226,55 @@ 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(); - } + public async Task InsertRichImage() + { + _message = string.Empty; + if (_richfilemanager) + { + var file = _fileManager.GetFile(); + if (file != null) + { + var interop = new RichTextEditorInterop(JSRuntime); + await interop.InsertImage(_editorElement, file.Url, ((!string.IsNullOrEmpty(file.Description)) ? file.Description : file.Name)); + _richfilemanager = false; + } + else + { + _message = Localizer["Message.Require.Image"]; + } + } + else + { + _richfilemanager = true; + } + StateHasChanged(); + } + + 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("rawhtmleditor"); + var image = "\"""; + _rawhtml = _rawhtml.Substring(0, pos) + image + _rawhtml.Substring(pos); + _rawfilemanager = false; + } + else + { + _message = Localizer["Message.Require.Image"]; + } + } + else + { + _rawfilemanager = true; + } + StateHasChanged(); + } } diff --git a/Oqtane.Client/Modules/HtmlText/Edit.razor b/Oqtane.Client/Modules/HtmlText/Edit.razor index ca86ea95..bb609f80 100644 --- a/Oqtane.Client/Modules/HtmlText/Edit.razor +++ b/Oqtane.Client/Modules/HtmlText/Edit.razor @@ -13,7 +13,7 @@ @if (_content != null) { - +
@SharedLocalizer["Cancel"] @@ -60,6 +60,7 @@ private RichTextEditor RichTextEditorHtml; private bool _allowfilemanagement; + private bool _allowrawhtml; private string _content = null; private string _createdby; private DateTime _createdon; @@ -73,6 +74,7 @@ try { _allowfilemanagement = bool.Parse(SettingService.GetSetting(ModuleState.Settings, "AllowFileManagement", "true")); + _allowrawhtml = bool.Parse(SettingService.GetSetting(ModuleState.Settings, "AllowRawHtml", "true")); await LoadContent(); } catch (Exception ex) diff --git a/Oqtane.Client/Modules/HtmlText/Settings.razor b/Oqtane.Client/Modules/HtmlText/Settings.razor index 237049a6..bc1004a3 100644 --- a/Oqtane.Client/Modules/HtmlText/Settings.razor +++ b/Oqtane.Client/Modules/HtmlText/Settings.razor @@ -15,18 +15,29 @@ +
+ +
+ +
+
@code { private string resourceType = "Oqtane.Modules.HtmlText.Settings, Oqtane.Client"; // for localization private string _allowfilemanagement; + private string _allowrawhtml; protected override void OnInitialized() { try { - _allowfilemanagement = SettingService.GetSetting(ModuleState.Settings, "AllowFileManagement", "true"); - } + _allowfilemanagement = SettingService.GetSetting(ModuleState.Settings, "AllowFileManagement", "true"); + _allowrawhtml = SettingService.GetSetting(ModuleState.Settings, "AllowRawHtml", "true"); + } catch (Exception ex) { ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error); @@ -39,7 +50,8 @@ { var settings = await SettingService.GetModuleSettingsAsync(ModuleState.ModuleId); settings = SettingService.SetSetting(settings, "AllowFileManagement", _allowfilemanagement); - await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId); + settings = SettingService.SetSetting(settings, "AllowRawHtml", _allowrawhtml); + await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId); } catch (Exception ex) { diff --git a/Oqtane.Client/Resources/Modules/HtmlText/Settings.resx b/Oqtane.Client/Resources/Modules/HtmlText/Settings.resx index c760704c..a4666daf 100644 --- a/Oqtane.Client/Resources/Modules/HtmlText/Settings.resx +++ b/Oqtane.Client/Resources/Modules/HtmlText/Settings.resx @@ -123,4 +123,10 @@ Allow File Management: + + Specify If Editors Can Enter Raw HTML + + + Allow Raw HTML: + \ No newline at end of file diff --git a/Oqtane.Client/UI/Interop.cs b/Oqtane.Client/UI/Interop.cs index 8d8ca138..be03b5c7 100644 --- a/Oqtane.Client/UI/Interop.cs +++ b/Oqtane.Client/UI/Interop.cs @@ -293,5 +293,19 @@ namespace Oqtane.UI return Task.CompletedTask; } } + + public ValueTask GetCaretPosition(string id) + { + try + { + return _jsRuntime.InvokeAsync( + "Oqtane.Interop.getCaretPosition", + id); + } + catch + { + return new ValueTask(-1); + } + } } } diff --git a/Oqtane.Server/wwwroot/js/interop.js b/Oqtane.Server/wwwroot/js/interop.js index b62c006c..96c9811b 100644 --- a/Oqtane.Server/wwwroot/js/interop.js +++ b/Oqtane.Server/wwwroot/js/interop.js @@ -389,6 +389,11 @@ Oqtane.Interop = { behavior: "smooth", block: "start", inline: "nearest" - }); + }); + } + }, + getCaretPosition: function (id) { + var element = document.getElementById(id); + return element.selectionStart; } -}}; +};