diff --git a/Oqtane.Client/Modules/Controls/RichTextEditor.razor b/Oqtane.Client/Modules/Controls/RichTextEditor.razor index c588274f..6b15441c 100644 --- a/Oqtane.Client/Modules/Controls/RichTextEditor.razor +++ b/Oqtane.Client/Modules/Controls/RichTextEditor.razor @@ -117,6 +117,11 @@ { if (firstRender) { + var oqtaneInterop = new Interop(JsRuntime); + + await oqtaneInterop.LoadInteropScript("js/quill-interop.js"); + + var interop = new RichTextEditorInterop(JsRuntime); await interop.CreateEditor( diff --git a/Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs b/Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs index a5bd4ffa..0ecce251 100644 --- a/Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs +++ b/Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs @@ -13,7 +13,7 @@ namespace Oqtane.Modules.Controls _jsRuntime = jsRuntime; } - public Task CreateEditor( + public async Task CreateEditor( ElementReference quillElement, ElementReference toolbar, bool readOnly, @@ -23,15 +23,14 @@ namespace Oqtane.Modules.Controls { try { - _jsRuntime.InvokeAsync( + await _jsRuntime.InvokeAsync( "Oqtane.RichTextEditor.createQuill", - quillElement, toolbar, readOnly, - placeholder, theme, debugLevel); - return Task.CompletedTask; + quillElement, toolbar, readOnly, placeholder, theme, debugLevel); + return; } catch { - return Task.CompletedTask; + // handle exception } } diff --git a/Oqtane.Client/Modules/HtmlText/Edit.razor b/Oqtane.Client/Modules/HtmlText/Edit.razor index 292706e2..f901d693 100644 --- a/Oqtane.Client/Modules/HtmlText/Edit.razor +++ b/Oqtane.Client/Modules/HtmlText/Edit.razor @@ -29,10 +29,7 @@ new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css" }, // the following resources should be declared in the RichTextEditor component however the framework currently only supports resource management for modules and themes new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.bubble.css" }, - new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.snow.css" }, - new Resource { ResourceType = ResourceType.Script, Url = "js/quill1.3.6.min.js" }, - new Resource { ResourceType = ResourceType.Script, Url = "js/quill-blot-formatter.min.js" }, - new Resource { ResourceType = ResourceType.Script, Url = "js/quill-interop.js" } + new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.snow.css" } }; private RichTextEditor RichTextEditorHtml; diff --git a/Oqtane.Client/UI/Interop.cs b/Oqtane.Client/UI/Interop.cs index 3bdbe0bb..c6981b9e 100644 --- a/Oqtane.Client/UI/Interop.cs +++ b/Oqtane.Client/UI/Interop.cs @@ -234,5 +234,18 @@ namespace Oqtane.UI return Task.CompletedTask; } } + + public async Task LoadInteropScript(string filePath) + { + try + { + await _jsRuntime.InvokeAsync("Oqtane.Interop.loadInteropScript", filePath); + } + catch + { + // handle exception + } + + } } } diff --git a/Oqtane.Server/Pages/_Host.cshtml b/Oqtane.Server/Pages/_Host.cshtml index e8795611..a214e706 100644 --- a/Oqtane.Server/Pages/_Host.cshtml +++ b/Oqtane.Server/Pages/_Host.cshtml @@ -16,6 +16,7 @@ + @(Html.AntiForgeryToken()) diff --git a/Oqtane.Server/wwwroot/js/interop.js b/Oqtane.Server/wwwroot/js/interop.js index 5b516f99..e978c591 100644 --- a/Oqtane.Server/wwwroot/js/interop.js +++ b/Oqtane.Server/wwwroot/js/interop.js @@ -321,5 +321,15 @@ Oqtane.Interop = { setInterval(function () { window.location.href = url; }, wait * 1000); + }, + loadInteropScript: async function (filePath) { + const promise = new Promise((resolve, reject) => { + loadjs(filePath, { returnPromise: true }) + .then(function () { resolve(true) }) + .catch(function (pathsNotFound) { reject(false) }); + }); + + const result = await promise; + return; } }; diff --git a/Oqtane.Server/wwwroot/js/loadjs.min.js b/Oqtane.Server/wwwroot/js/loadjs.min.js new file mode 100644 index 00000000..b2165fc3 --- /dev/null +++ b/Oqtane.Server/wwwroot/js/loadjs.min.js @@ -0,0 +1 @@ +loadjs=function(){var h=function(){},c={},u={},f={};function o(e,n){if(e){var r=f[e];if(u[e]=n,r)for(;r.length;)r[0](e,n),r.splice(0,1)}}function l(e,n){e.call&&(e={success:e}),n.length?(e.error||h)(n):(e.success||h)(e)}function d(r,t,s,i){var c,o,e=document,n=s.async,u=(s.numRetries||0)+1,f=s.before||h,l=r.replace(/[\?|#].*$/,""),a=r.replace(/^(css|img)!/,"");i=i||0,/(^css!|\.css$)/.test(l)?((o=e.createElement("link")).rel="stylesheet",o.href=a,(c="hideFocus"in o)&&o.relList&&(c=0,o.rel="preload",o.as="style")):/(^img!|\.(png|gif|jpg|svg|webp)$)/.test(l)?(o=e.createElement("img")).src=a:((o=e.createElement("script")).src=r,o.async=void 0===n||n),!(o.onload=o.onerror=o.onbeforeload=function(e){var n=e.type[0];if(c)try{o.sheet.cssText.length||(n="e")}catch(e){18!=e.code&&(n="e")}if("e"==n){if((i+=1)