Diplomarbeit-Absolventenverein/oqtane.framework
10
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

modifications to JSInterop in RichTextEditor

Browse Source
This commit is contained in:
Shaun Walker
2020-05-21 15:55:58 -04:00
parent d8fca5de20
commit c089b90659
6 changed files with 121 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -117,8 +117,9 @@
{
if (firstRender)
{
await RichTextEditorInterop.CreateEditor(
JsRuntime,
var interop = new RichTextEditorInterop(JsRuntime);
await interop.CreateEditor(
_editorElement,
_toolBar,
ReadOnly,
@ -126,14 +127,10 @@
Theme,
DebugLevel);
await RichTextEditorInterop.LoadEditorContent(
JsRuntime,
_editorElement, Content);
await interop.LoadEditorContent(_editorElement, Content);
// preserve a copy of the rich text content ( Quill sanitizes content so we need to retrieve it from the editor )
_original = await RichTextEditorInterop.GetHtml(
JsRuntime,
_editorElement);
_original = await interop.GetHtml(_editorElement);
}
}
@ -146,25 +143,22 @@
public async Task RefreshRichText()
{
await RichTextEditorInterop.LoadEditorContent(
JsRuntime,
_editorElement, _content);
var interop = new RichTextEditorInterop(JsRuntime);
await interop.LoadEditorContent(_editorElement, _content);
}
public async Task RefreshRawHtml()
{
_content = await RichTextEditorInterop.GetHtml(
JsRuntime,
_editorElement);
var interop = new RichTextEditorInterop(JsRuntime);
_content = await interop.GetHtml(_editorElement);
StateHasChanged();
}
public async Task<string> GetHtml()
{
// get rich text content
string content = await RichTextEditorInterop.GetHtml(
JsRuntime,
_editorElement);
var interop = new RichTextEditorInterop(JsRuntime);
string content = await interop.GetHtml(_editorElement);
if (_original != content)
{
@ -185,9 +179,8 @@
var fileid = _fileManager.GetFileId();
if (fileid != -1)
{
await RichTextEditorInterop.InsertImage(
JsRuntime,
_editorElement, ContentUrl(fileid));
var interop = new RichTextEditorInterop(JsRuntime);
await interop.InsertImage(_editorElement, ContentUrl(fileid));
_filemanagervisible = false;
_message = string.Empty;
}
@ -207,22 +200,19 @@
// other rich text editor methods which can be used by developers
public async Task<string> GetText()
{
return await RichTextEditorInterop.GetText(
JsRuntime,
_editorElement);
var interop = new RichTextEditorInterop(JsRuntime);
return await interop.GetText(_editorElement);
}
public async Task<string> GetContent()
{
return await RichTextEditorInterop.GetContent(
JsRuntime,
_editorElement);
var interop = new RichTextEditorInterop(JsRuntime);
return await interop.GetContent(_editorElement);
}
public async Task EnableEditor(bool mode)
{
await RichTextEditorInterop.EnableEditor(
JsRuntime,
_editorElement, mode);
var interop = new RichTextEditorInterop(JsRuntime);
await interop.EnableEditor(_editorElement, mode);
}
}

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

@ -4,10 +4,16 @@ using System.Threading.Tasks;
namespace Oqtane.Modules.Controls
{
public static class RichTextEditorInterop
public class RichTextEditorInterop
{
internal static ValueTask<object> CreateEditor(
IJSRuntime jsRuntime,
private readonly IJSRuntime _jsRuntime;
public RichTextEditorInterop(IJSRuntime jsRuntime)
{
_jsRuntime = jsRuntime;
}
public Task CreateEditor(
ElementReference quillElement,
ElementReference toolbar,
bool readOnly,
@ -15,66 +21,104 @@ namespace Oqtane.Modules.Controls
string theme,
string debugLevel)
{
return jsRuntime.InvokeAsync<object>(
"interop.createQuill",
quillElement, toolbar, readOnly,
placeholder, theme, debugLevel);
try
{
_jsRuntime.InvokeAsync<object>(
"interop.createQuill",
quillElement, toolbar, readOnly,
placeholder, theme, debugLevel);
return Task.CompletedTask;
}
catch
{
return Task.CompletedTask;
}
}
internal static ValueTask<string> GetText(
IJSRuntime jsRuntime,
ElementReference quillElement)
public ValueTask<string> GetText(ElementReference quillElement)
{
return jsRuntime.InvokeAsync<string>(
"interop.getQuillText",
quillElement);
try
{
return _jsRuntime.InvokeAsync<string>(
"interop.getQuillText",
quillElement);
}
catch
{
return new ValueTask<string>(Task.FromResult(string.Empty));
}
}
internal static ValueTask<string> GetHtml(
IJSRuntime jsRuntime,
ElementReference quillElement)
public ValueTask<string> GetHtml(ElementReference quillElement)
{
return jsRuntime.InvokeAsync<string>(
"interop.getQuillHTML",
quillElement);
try
{
return _jsRuntime.InvokeAsync<string>(
"interop.getQuillHTML",
quillElement);
}
catch
{
return new ValueTask<string>(Task.FromResult(string.Empty));
}
}
internal static ValueTask<string> GetContent(
IJSRuntime jsRuntime,
ElementReference quillElement)
public ValueTask<string> GetContent(ElementReference quillElement)
{
return jsRuntime.InvokeAsync<string>(
"interop.getQuillContent",
quillElement);
try
{
return _jsRuntime.InvokeAsync<string>(
"interop.getQuillContent",
quillElement);
}
catch
{
return new ValueTask<string>(Task.FromResult(string.Empty));
}
}
internal static ValueTask<object> LoadEditorContent(
IJSRuntime jsRuntime,
ElementReference quillElement,
string content)
public Task LoadEditorContent(ElementReference quillElement, string content)
{
return jsRuntime.InvokeAsync<object>(
"interop.loadQuillContent",
quillElement, content);
try
{
_jsRuntime.InvokeAsync<object>(
"interop.loadQuillContent",
quillElement, content);
return Task.CompletedTask;
}
catch
{
return Task.CompletedTask;
}
}
internal static ValueTask<object> EnableEditor(
IJSRuntime jsRuntime,
ElementReference quillElement,
bool mode)
public Task EnableEditor(ElementReference quillElement, bool mode)
{
return jsRuntime.InvokeAsync<object>(
"interop.enableQuillEditor", quillElement, mode);
try
{
_jsRuntime.InvokeAsync<object>(
"interop.enableQuillEditor", quillElement, mode);
return Task.CompletedTask;
}
catch
{
return Task.CompletedTask;
}
}
internal static ValueTask<object> InsertImage(
IJSRuntime jsRuntime,
ElementReference quillElement,
string imageUrl)
public Task InsertImage(ElementReference quillElement, string imageUrl)
{
return jsRuntime.InvokeAsync<object>(
"interop.insertQuillImage",
quillElement, imageUrl);
try
{
_jsRuntime.InvokeAsync<object>(
"interop.insertQuillImage",
quillElement, imageUrl);
return Task.CompletedTask;
}
catch
{
return Task.CompletedTask;
}
}
}
}

22
Oqtane.Client/UI/Interop.cs
View File

@ -1,6 +1,4 @@
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System;
using Microsoft.JSInterop;
using System.Threading.Tasks;
namespace Oqtane.UI
@ -18,7 +16,7 @@ namespace Oqtane.UI
{
try
{
_jsRuntime.InvokeAsync<string>(
_jsRuntime.InvokeAsync<object>(
"interop.setCookie",
name, value, days);
return Task.CompletedTask;
@ -47,7 +45,7 @@ namespace Oqtane.UI
{
try
{
_jsRuntime.InvokeAsync<string>(
_jsRuntime.InvokeAsync<object>(
"interop.updateTitle",
title);
return Task.CompletedTask;
@ -62,7 +60,7 @@ namespace Oqtane.UI
{
try
{
_jsRuntime.InvokeAsync<string>(
_jsRuntime.InvokeAsync<object>(
"interop.includeMeta",
id, attribute, name, content);
return Task.CompletedTask;
@ -77,7 +75,7 @@ namespace Oqtane.UI
{
try
{
_jsRuntime.InvokeAsync<string>(
_jsRuntime.InvokeAsync<object>(
"interop.includeLink",
id, rel, url, type, integrity, crossorigin);
return Task.CompletedTask;
@ -92,7 +90,7 @@ namespace Oqtane.UI
{
try
{
_jsRuntime.InvokeAsync<string>(
_jsRuntime.InvokeAsync<object>(
"interop.includeScript",
id, src, content, location, integrity, crossorigin);
return Task.CompletedTask;
@ -107,7 +105,7 @@ namespace Oqtane.UI
{
try
{
_jsRuntime.InvokeAsync<string>(
_jsRuntime.InvokeAsync<object>(
"interop.includeLink",
id, "stylesheet", url, "text/css");
return Task.CompletedTask;
@ -122,7 +120,7 @@ namespace Oqtane.UI
{
try
{
_jsRuntime.InvokeAsync<string>(
_jsRuntime.InvokeAsync<object>(
"interop.removeElementsById",
prefix, first, last);
return Task.CompletedTask;
@ -152,7 +150,7 @@ namespace Oqtane.UI
{
try
{
_jsRuntime.InvokeAsync<string>(
_jsRuntime.InvokeAsync<object>(
"interop.submitForm",
path, fields);
return Task.CompletedTask;
@ -181,7 +179,7 @@ namespace Oqtane.UI
{
try
{
_jsRuntime.InvokeAsync<string>(
_jsRuntime.InvokeAsync<object>(
"interop.uploadFiles",
posturl, folder, id);
return Task.CompletedTask;