diff --git a/Oqtane.Client/Modules/Controls/RichTextEditor.razor b/Oqtane.Client/Modules/Controls/RichTextEditor.razor index ad237acb..bada030c 100644 --- a/Oqtane.Client/Modules/Controls/RichTextEditor.razor +++ b/Oqtane.Client/Modules/Controls/RichTextEditor.razor @@ -122,6 +122,7 @@ private string _message = string.Empty; private bool _contentchanged = false; + private int _editorIndex; [Parameter] public string Content { get; set; } @@ -275,18 +276,18 @@ // return original raw html content return _originalrawhtml; } - } - } + } + } - public async Task InsertRichImage() - { - _message = string.Empty; - if (_richfilemanager) - { - var file = _fileManager.GetFile(); + 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)); + await interop.InsertImage(_editorElement, file.Url, ((!string.IsNullOrEmpty(file.Description)) ? file.Description : file.Name), _editorIndex); _richhtml = await interop.GetHtml(_editorElement); _richfilemanager = false; } @@ -297,6 +298,7 @@ } else { + _editorIndex = await interop.GetCurrentCursor(_editorElement); _richfilemanager = true; } StateHasChanged(); diff --git a/Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs b/Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs index 6765cad9..338f240a 100644 --- a/Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs +++ b/Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs @@ -105,13 +105,25 @@ namespace Oqtane.Modules.Controls } } - public Task InsertImage(ElementReference quillElement, string imageUrl, string altText) + public ValueTask GetCurrentCursor(ElementReference quillElement) + { + try + { + return _jsRuntime.InvokeAsync("Oqtane.RichTextEditor.getCurrentCursor", quillElement); + } + catch + { + return new ValueTask(Task.FromResult(0)); + } + } + + public Task InsertImage(ElementReference quillElement, string imageUrl, string altText, int editorIndex) { try { _jsRuntime.InvokeAsync( "Oqtane.RichTextEditor.insertQuillImage", - quillElement, imageUrl, altText); + quillElement, imageUrl, altText, editorIndex); return Task.CompletedTask; } catch diff --git a/Oqtane.Server/wwwroot/js/quill-interop.js b/Oqtane.Server/wwwroot/js/quill-interop.js index e5610a9e..4598d7aa 100644 --- a/Oqtane.Server/wwwroot/js/quill-interop.js +++ b/Oqtane.Server/wwwroot/js/quill-interop.js @@ -35,13 +35,15 @@ Oqtane.RichTextEditor = { enableQuillEditor: function (editorElement, mode) { editorElement.__quill.enable(mode); }, - insertQuillImage: function (quillElement, imageURL, altText) { - var Delta = Quill.import('delta'); - editorIndex = 0; - + getCurrentCursor: function (quillElement) { + var editorIndex = 0; if (quillElement.__quill.getSelection() !== null) { editorIndex = quillElement.__quill.getSelection().index; } + return editorIndex; + }, + insertQuillImage: function (quillElement, imageURL, altText, editorIndex) { + var Delta = Quill.import('delta'); return quillElement.__quill.updateContents( new Delta()