use JSInterop for loading QuillJSTextEditor stylesheet

This commit is contained in:
sbwalker
2024-07-18 13:17:23 -04:00
parent 4f3190bf73
commit 7df5eba775
2 changed files with 21 additions and 20 deletions

View File

@ -182,7 +182,7 @@
private bool _settingsLoaded; private bool _settingsLoaded;
private bool _initialized = false; private bool _initialized = false;
private QuillEditorInterop interop; private QuillEditorInterop _interop;
private FileManager _fileManager; private FileManager _fileManager;
private string _activetab = "Rich"; private string _activetab = "Rich";
private bool _allowSettings = false; private bool _allowSettings = false;
@ -251,7 +251,7 @@
protected override void OnInitialized() protected override void OnInitialized()
{ {
interop = new QuillEditorInterop(JSRuntime); _interop = new QuillEditorInterop(JSRuntime);
if (string.IsNullOrEmpty(Placeholder)) if (string.IsNullOrEmpty(Placeholder))
{ {
@ -271,6 +271,13 @@
protected override async Task OnAfterRenderAsync(bool firstRender) protected override async Task OnAfterRenderAsync(bool firstRender)
{ {
if (firstRender)
{
// include CSS theme
var interop = new Interop(JSRuntime);
await interop.IncludeLink("", "stylesheet", $"css/quill/quill.{_theme}.css", "text/css", "", "", "");
}
await base.OnAfterRenderAsync(firstRender); await base.OnAfterRenderAsync(firstRender);
LoadSettings(); LoadSettings();
@ -279,7 +286,7 @@
{ {
if (firstRender) if (firstRender)
{ {
await interop.CreateEditor( await _interop.CreateEditor(
_editorElement, _editorElement,
_toolBar, _toolBar,
ReadOnly, ReadOnly,
@ -287,10 +294,10 @@
_theme, _theme,
_debugLevel); _debugLevel);
await interop.LoadEditorContent(_editorElement, _richhtml); await _interop.LoadEditorContent(_editorElement, _richhtml);
// preserve a copy of the content (Quill sanitizes content so we need to retrieve it from the editor as it may have been modified) // preserve a copy of the content (Quill sanitizes content so we need to retrieve it from the editor as it may have been modified)
_originalrichhtml = await interop.GetHtml(_editorElement); _originalrichhtml = await _interop.GetHtml(_editorElement);
_initialized = true; _initialized = true;
} }
@ -301,19 +308,19 @@
if (_contentchanged) if (_contentchanged)
{ {
// reload editor if Content passed to component has changed // reload editor if Content passed to component has changed
await interop.LoadEditorContent(_editorElement, _richhtml); await _interop.LoadEditorContent(_editorElement, _richhtml);
_originalrichhtml = await interop.GetHtml(_editorElement); _originalrichhtml = await _interop.GetHtml(_editorElement);
_contentchanged = false; _contentchanged = false;
} }
else else
{ {
// preserve changed content on re-render event // preserve changed content on re-render event
var richhtml = await interop.GetHtml(_editorElement); var richhtml = await _interop.GetHtml(_editorElement);
if (richhtml != _richhtml) if (richhtml != _richhtml)
{ {
_richhtml = richhtml; _richhtml = richhtml;
await interop.LoadEditorContent(_editorElement, _richhtml); await _interop.LoadEditorContent(_editorElement, _richhtml);
} }
} }
} }
@ -350,7 +357,7 @@
if (_allowRichText) if (_allowRichText)
{ {
richhtml = await interop.GetHtml(_editorElement); richhtml = await _interop.GetHtml(_editorElement);
} }
if (richhtml != _originalrichhtml && !string.IsNullOrEmpty(richhtml)) if (richhtml != _originalrichhtml && !string.IsNullOrEmpty(richhtml))
@ -397,7 +404,7 @@
if (_allowRichText) if (_allowRichText)
{ {
richhtml = await interop.GetHtml(_editorElement); richhtml = await _interop.GetHtml(_editorElement);
} }
if (richhtml != _originalrichhtml && !string.IsNullOrEmpty(richhtml)) if (richhtml != _originalrichhtml && !string.IsNullOrEmpty(richhtml))
@ -425,8 +432,8 @@
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), _editorIndex); 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;
} }
else else
@ -436,7 +443,7 @@
} }
else else
{ {
_editorIndex = await interop.GetCurrentCursor(_editorElement); _editorIndex = await _interop.GetCurrentCursor(_editorElement);
_richfilemanager = true; _richfilemanager = true;
} }
StateHasChanged(); StateHasChanged();

View File

@ -51,12 +51,6 @@
public override string Title => "Edit Html/Text"; public override string Title => "Edit Html/Text";
public override List<Resource> Resources => new List<Resource>()
{
new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill.bubble.css" },
new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill.snow.css" }
};
private RichTextEditor RichTextEditorHtml; private RichTextEditor RichTextEditorHtml;
private string _content = null; private string _content = null;
private string _createdby; private string _createdby;