kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4161 from zyhfish/task/fix-issue-4158

Browse Source 
Fix #4158: insert image into correct position.
This commit is contained in:
Shaun Walker 2024-04-22 16:28:47 -04:00 committed by GitHub
commit 86cbdf2442
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Oqtane.Client/Modules/Controls/RichTextEditor.razor
View File

@ -122,6 +122,7 @@
private string _message = string.Empty; private string _message = string.Empty;
private bool _contentchanged = false; private bool _contentchanged = false;
private int _editorIndex;
[Parameter] [Parameter]
public string Content { get; set; } public string Content { get; set; }
@ -286,7 +287,7 @@
var file = _fileManager.GetFile(); var file = _fileManager.GetFile();
if (file != null) 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); _richhtml = await interop.GetHtml(_editorElement);
_richfilemanager = false; _richfilemanager = false;
} }
@ -297,6 +298,7 @@
} }
else else
{ {
_editorIndex = await interop.GetCurrentCursor(_editorElement);
_richfilemanager = true; _richfilemanager = true;
} }
StateHasChanged(); StateHasChanged();

16
Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs
View File

@ -105,13 +105,25 @@ namespace Oqtane.Modules.Controls
} }
} }
public Task InsertImage(ElementReference quillElement, string imageUrl, string altText) public ValueTask<int> GetCurrentCursor(ElementReference quillElement)
{
try
{
return _jsRuntime.InvokeAsync<int>("Oqtane.RichTextEditor.getCurrentCursor", quillElement);
}
catch
{
return new ValueTask<int>(Task.FromResult(0));
}
}
public Task InsertImage(ElementReference quillElement, string imageUrl, string altText, int editorIndex)
{ {
try try
{ {
_jsRuntime.InvokeAsync<object>( _jsRuntime.InvokeAsync<object>(
"Oqtane.RichTextEditor.insertQuillImage", "Oqtane.RichTextEditor.insertQuillImage",
quillElement, imageUrl, altText); quillElement, imageUrl, altText, editorIndex);
return Task.CompletedTask; return Task.CompletedTask;
} }
catch catch

10
Oqtane.Server/wwwroot/js/quill-interop.js
View File

@ -35,13 +35,15 @@ Oqtane.RichTextEditor = {
enableQuillEditor: function (editorElement, mode) { enableQuillEditor: function (editorElement, mode) {
editorElement.__quill.enable(mode); editorElement.__quill.enable(mode);
}, },
insertQuillImage: function (quillElement, imageURL, altText) { getCurrentCursor: function (quillElement) {
var Delta = Quill.import('delta'); var editorIndex = 0;
editorIndex = 0;
if (quillElement.__quill.getSelection() !== null) { if (quillElement.__quill.getSelection() !== null) {
editorIndex = quillElement.__quill.getSelection().index; editorIndex = quillElement.__quill.getSelection().index;
} }
return editorIndex;
},
insertQuillImage: function (quillElement, imageURL, altText, editorIndex) {
var Delta = Quill.import('delta');
return quillElement.__quill.updateContents( return quillElement.__quill.updateContents(
new Delta() new Delta()