Merge pull request #4431 from sbwalker/dev
QuillJSTextEditor setting improvements
This commit is contained in:
Shaun Walker
GitHub
commit
eda48ab0e6
|
|
@ -6,7 +6,7 @@
|
|||
@inject IStringLocalizer<QuillJSTextEditor> Localizer
|
||||
@inject IStringLocalizer<SharedResources> SharedLocalizer
|
||||
|
||||
<div class="quill-text-editor @(_settingsVisible ? "d-none" : "d-block")">
|
||||
<div class="quill-text-editor">
|
||||
<TabStrip ActiveTab="@_activetab">
|
||||
@if (_allowRichText)
|
||||
{
|
||||
|
|
@ -63,12 +63,6 @@
|
|||
<button class="ql-link"></button>
|
||||
</span>
|
||||
}
|
||||
@if (_hasAdminPermission)
|
||||
{
|
||||
<span class="ql-formats">
|
||||
<button class="ql-settings" @onclick="OpenSettings"></button>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<div @ref="@_editorElement"></div>
|
||||
</div>
|
||||
|
|
@ -94,10 +88,6 @@
|
|||
@((MarkupString)" ")
|
||||
<button type="button" class="btn btn-secondary" @onclick="CloseRawFileManager">@Localizer["Close"]</button>
|
||||
}
|
||||
else if(_hasAdminPermission)
|
||||
{
|
||||
<button type="button" class="btn btn-primary ms-1" @onclick="OpenSettings">@Localizer["Settings"]</button>
|
||||
}
|
||||
</div>
|
||||
@if (ReadOnly)
|
||||
{
|
||||
|
|
@ -109,66 +99,93 @@
|
|||
}
|
||||
</TabPanel>
|
||||
}
|
||||
@if (_allowSettings)
|
||||
{
|
||||
<TabPanel Name="Settings" Heading="Settings" ResourceKey="Settings">
|
||||
<div class="quill-text-editor-settings">
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="Scope" ResourceKey="Scope" ResourceType="@resourceType" HelpText="Specify if settings are scoped to the module or site">Scope: </Label>
|
||||
<div class="col-sm-9">
|
||||
<select id="Scope" class="form-select" value="@_scopeSetting" @onchange="(e => ScopeChanged(e))">
|
||||
<option value="Module">@SharedLocalizer["Module"]</option>
|
||||
@if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin))
|
||||
{
|
||||
<option value="Site">@SharedLocalizer["Site"]</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="AllowFileManagement" ResourceKey="AllowFileManagement" ResourceType="@resourceType" HelpText="Specify If Editors Can Upload and Select Files">Allow File Management: </Label>
|
||||
<div class="col-sm-9">
|
||||
<select id="AllowFileManagement" class="form-select" @bind="@_allowFileManagementSetting" required>
|
||||
<option value="True">@SharedLocalizer["Yes"]</option>
|
||||
<option value="False">@SharedLocalizer["No"]</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="AllowRawHtml" ResourceKey="AllowRawHtml" ResourceType="@resourceType" HelpText="Specify If Editors Can Enter Raw HTML">Allow Raw HTML: </Label>
|
||||
<div class="col-sm-9">
|
||||
<select id="AllowRawHtml" class="form-select" @bind="@_allowRawHtmlSetting" required>
|
||||
<option value="True">@SharedLocalizer["Yes"]</option>
|
||||
<option value="False">@SharedLocalizer["No"]</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="AllowRichText" ResourceKey="AllowRichText" ResourceType="@resourceType" HelpText="Specify If Editors Can Use Rich Text Editor">Allow Rich Text: </Label>
|
||||
<div class="col-sm-9">
|
||||
<select id="AllowRichText" class="form-select" @bind="@_allowRichTextSetting" required>
|
||||
<option value="True">@SharedLocalizer["Yes"]</option>
|
||||
<option value="False">@SharedLocalizer["No"]</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="Theme" ResourceKey="Theme" ResourceType="@resourceType" HelpText="Specify the Rich Text Editor's Theme">Theme: </Label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" id="Theme" class="form-control" @bind="_themeSetting" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="DebugLevel" ResourceKey="DebugLevel" ResourceType="@resourceType" HelpText="Specify the Debug Level">Debug Level: </Label>
|
||||
<div class="col-sm-9">
|
||||
<select id="DebugLevel" class="form-select" @bind="_debugLevelSetting">
|
||||
@foreach (var level in _debugLevels)
|
||||
{
|
||||
<option value="@level">@level</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="ToolbarContent" ResourceKey="ToolbarContent" ResourceType="@resourceType" HelpText="Specify the Toolbar Content">Toolbar Content: </Label>
|
||||
<div class="col-sm-9">
|
||||
<textarea id="ToolbarContent" class="form-control" @bind="_toolbarContentSetting" rows="3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<div class="col-sm-9 offset-sm-3">
|
||||
<button type="button" class="btn btn-success" @onclick="@(async () => await UpdateSettings())">@Localizer["SaveSettings"]</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
}
|
||||
</TabStrip>
|
||||
</div>
|
||||
<div class="quill-text-editor-settings @(_settingsVisible ? "d-block" : "d-none")">
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="AllowFileManagement" ResourceKey="AllowFileManagement" ResourceType="@resourceType" HelpText="Specify If Editors Can Upload and Select Files">Allow File Management: </Label>
|
||||
<div class="col-sm-9">
|
||||
<input type="checkbox" id="AllowFileManagement" class="form-check-input" @bind="_allowFileManagementSetting" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="AllowRawHtml" ResourceKey="AllowRawHtml" ResourceType="@resourceType" HelpText="Specify If Editors Can Enter Raw HTML">Allow Raw HTML: </Label>
|
||||
<div class="col-sm-9">
|
||||
<input type="checkbox" id="AllowRawHtml" class="form-check-input" @bind="_allowRawHtmlSetting" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="AllowRichText" ResourceKey="AllowRichText" ResourceType="@resourceType" HelpText="Specify If Editors Can Use Rich Text Editor">Allow Rich Text: </Label>
|
||||
<div class="col-sm-9">
|
||||
<input type="checkbox" id="AllowRichText" class="form-check-input" @bind="_allowRichTextSetting" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="Theme" ResourceKey="Theme" ResourceType="@resourceType" HelpText="Specify the Rich Text Editor's Theme">Theme: </Label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" id="Theme" class="form-control" @bind="_themeSetting" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="DebugLevel" ResourceKey="DebugLevel" ResourceType="@resourceType" HelpText="Specify the Debug Level">Debug Level: </Label>
|
||||
<div class="col-sm-9">
|
||||
<select id="DebugLevel" class="form-select" @bind="_debugLevelSetting">
|
||||
@foreach (var level in _debugLevels)
|
||||
{
|
||||
<option value="@level">@level</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="ToolbarContent" ResourceKey="ToolbarContent" ResourceType="@resourceType" HelpText="Specify the Toolbar Content">Toolbar Content: </Label>
|
||||
<div class="col-sm-9">
|
||||
<textarea id="ToolbarContent" class="form-control" @bind="_toolbarContentSetting" rows="5" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<div class="col-sm-9 offset-sm-3">
|
||||
<button type="button" class="btn btn-success" @onclick="@(async () => await UpdateSettings())">@SharedLocalizer["Save"]</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private string resourceType = "Oqtane.Modules.Controls.QuillJSTextEditor, Oqtane.Client";
|
||||
|
||||
private bool _settingsLoaded;
|
||||
private bool _initialized = false;
|
||||
|
||||
private QuillEditorInterop interop;
|
||||
private FileManager _fileManager;
|
||||
private string _activetab = "Rich";
|
||||
private bool _hasAdminPermission;
|
||||
private bool _allowSettings = false;
|
||||
|
||||
private bool _allowFileManagement = false;
|
||||
private bool _allowRawHtml = false;
|
||||
|
|
@ -177,16 +194,13 @@
|
|||
private string _debugLevel = "info";
|
||||
private string _toolbarContent = string.Empty;
|
||||
|
||||
//adjust settings variables won't affect UI
|
||||
private bool _allowFileManagementSetting = false;
|
||||
private bool _allowRawHtmlSetting = false;
|
||||
private bool _allowRichTextSetting = false;
|
||||
private string _scopeSetting = "Module";
|
||||
private string _allowFileManagementSetting = "False";
|
||||
private string _allowRawHtmlSetting = "False";
|
||||
private string _allowRichTextSetting = "False";
|
||||
private string _themeSetting = "snow";
|
||||
private string _debugLevelSetting = "info";
|
||||
private string _toolbarContentSetting = string.Empty;
|
||||
private bool _settingsVisible;
|
||||
|
||||
private bool _settingsLoaded;
|
||||
|
||||
private ElementReference _editorElement;
|
||||
private ElementReference _toolBar;
|
||||
|
|
@ -211,6 +225,23 @@
|
|||
[Parameter]
|
||||
public string Placeholder { get; set; }
|
||||
|
||||
// the following parameters were supported by the original RichTextEditor and can be passed as optional static parameters
|
||||
|
||||
[Parameter]
|
||||
public bool? AllowFileManagement { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public bool? AllowRichText { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public bool? AllowRawHtml { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string Theme { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string DebugLevel { get; set; }
|
||||
|
||||
public override List<Resource> Resources { get; set; } = new List<Resource>()
|
||||
{
|
||||
new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill.min.js", Location = ResourceLocation.Body },
|
||||
|
|
@ -218,7 +249,7 @@
|
|||
new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-interop.js", Location = ResourceLocation.Body }
|
||||
};
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
interop = new QuillEditorInterop(JSRuntime);
|
||||
|
||||
|
|
@ -227,7 +258,7 @@
|
|||
Placeholder = Localizer["Placeholder"];
|
||||
}
|
||||
|
||||
await LoadSettings();
|
||||
LoadSettings();
|
||||
}
|
||||
|
||||
protected override void OnParametersSet()
|
||||
|
|
@ -242,7 +273,8 @@
|
|||
{
|
||||
await base.OnAfterRenderAsync(firstRender);
|
||||
|
||||
await LoadSettings();
|
||||
LoadSettings();
|
||||
|
||||
if (_allowRichText)
|
||||
{
|
||||
if (firstRender)
|
||||
|
|
@ -436,30 +468,45 @@
|
|||
StateHasChanged();
|
||||
}
|
||||
|
||||
private void OpenSettings()
|
||||
private void ScopeChanged(ChangeEventArgs e)
|
||||
{
|
||||
_settingsVisible = true;
|
||||
StateHasChanged();
|
||||
_scopeSetting = (string)e.Value;
|
||||
LoadSettings();
|
||||
}
|
||||
|
||||
private async Task LoadSettings()
|
||||
private void LoadSettings(bool reload = false)
|
||||
{
|
||||
try
|
||||
{
|
||||
if (!_settingsLoaded)
|
||||
if (!_settingsLoaded || reload)
|
||||
{
|
||||
var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
|
||||
_allowFileManagementSetting = _allowFileManagement = SettingService.GetSetting(settings, "QuillTextEditor_AllowFileManagement", "true") == "true";
|
||||
_allowRawHtmlSetting = _allowRawHtml = SettingService.GetSetting(settings, "QuillTextEditor_AllowRawHtml", "true") == "true";
|
||||
_allowRichTextSetting = _allowRichText = SettingService.GetSetting(settings, "QuillTextEditor_AllowRichText", "true") == "true";
|
||||
_themeSetting = _theme = SettingService.GetSetting(settings, "QuillTextEditor_Theme", "snow");
|
||||
_debugLevelSetting = _debugLevel = SettingService.GetSetting(settings, "QuillTextEditor_DebugLevel", "info");
|
||||
_toolbarContentSetting = _toolbarContent = SettingService.GetSetting(settings, "QuillTextEditor_ToolbarContent", string.Empty);
|
||||
_allowFileManagement = bool.Parse(GetSetting("Component", "QuillTextEditor_AllowFileManagement", "True"));
|
||||
_allowRawHtml = bool.Parse(GetSetting("Component", "QuillTextEditor_AllowRawHtml", "True"));
|
||||
_allowRichText = bool.Parse(GetSetting("Component", "QuillTextEditor_AllowRichText", "True"));
|
||||
_theme = GetSetting("Component", "QuillTextEditor_Theme", "snow");
|
||||
_debugLevel = GetSetting("Component", "QuillTextEditor_DebugLevel", "info");
|
||||
_toolbarContent = GetSetting("Component", "QuillTextEditor_ToolbarContent", string.Empty);
|
||||
|
||||
_hasAdminPermission = UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin);
|
||||
|
||||
_settingsLoaded = true;
|
||||
// optional static parameter overrides
|
||||
if (AllowFileManagement != null) _allowFileManagement = AllowFileManagement.Value;
|
||||
if (AllowRichText != null) _allowRichText = AllowRichText.Value;
|
||||
if (AllowRawHtml != null) _allowRawHtml = AllowRawHtml.Value;
|
||||
if (!string.IsNullOrEmpty(Theme)) _theme = Theme;
|
||||
if (!string.IsNullOrEmpty(DebugLevel)) _debugLevel = DebugLevel;
|
||||
}
|
||||
|
||||
_allowSettings = PageState.EditMode && UserSecurity.IsAuthorized(PageState.User, PermissionNames.Edit, PageState.Page.PermissionList);
|
||||
if (_allowSettings)
|
||||
{
|
||||
_allowFileManagementSetting = GetSetting(_scopeSetting, "QuillTextEditor_AllowFileManagement", "True");
|
||||
_allowRawHtmlSetting = GetSetting(_scopeSetting, "QuillTextEditor_AllowRawHtml", "True");
|
||||
_allowRichTextSetting = GetSetting(_scopeSetting, "QuillTextEditor_AllowRichText", "True");
|
||||
_themeSetting = GetSetting(_scopeSetting, "QuillTextEditor_Theme", "snow");
|
||||
_debugLevelSetting = GetSetting(_scopeSetting, "QuillTextEditor_DebugLevel", "info");
|
||||
_toolbarContentSetting = GetSetting(_scopeSetting, "QuillTextEditor_ToolbarContent", string.Empty);
|
||||
}
|
||||
|
||||
_settingsLoaded = true;
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
|
|
@ -467,18 +514,52 @@
|
|||
}
|
||||
}
|
||||
|
||||
private string GetSetting(string scope, string settingName, string defaultValue)
|
||||
{
|
||||
var settingValue = "";
|
||||
switch (scope)
|
||||
{
|
||||
case "Component":
|
||||
settingValue = SettingService.GetSetting(PageState.Site.Settings, settingName, defaultValue);
|
||||
settingValue = SettingService.GetSetting(ModuleState.Settings, settingName, settingValue);
|
||||
break;
|
||||
case "Site":
|
||||
settingValue = SettingService.GetSetting(PageState.Site.Settings, settingName, defaultValue);
|
||||
break;
|
||||
case "Module":
|
||||
settingValue = SettingService.GetSetting(ModuleState.Settings, settingName, defaultValue);
|
||||
break;
|
||||
}
|
||||
return settingValue;
|
||||
}
|
||||
|
||||
private async Task UpdateSettings()
|
||||
{
|
||||
try
|
||||
{
|
||||
var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowFileManagement", _allowFileManagementSetting.ToString().ToLower());
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRawHtml", _allowRawHtmlSetting.ToString().ToLower());
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRichText", _allowRichTextSetting.ToString().ToLower());
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_Theme", _themeSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_DebugLevel", _debugLevelSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_ToolbarContent", _toolbarContentSetting);
|
||||
await SettingService.UpdateSiteSettingsAsync(settings, PageState.Site.SiteId);
|
||||
if (_scopeSetting == "Site" && UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin))
|
||||
{
|
||||
var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowFileManagement", _allowFileManagementSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRawHtml", _allowRawHtmlSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRichText", _allowRichTextSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_Theme", _themeSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_DebugLevel", _debugLevelSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_ToolbarContent", _toolbarContentSetting);
|
||||
await SettingService.UpdateSiteSettingsAsync(settings, PageState.Site.SiteId);
|
||||
}
|
||||
else if (_scopeSetting == "Module")
|
||||
{
|
||||
var settings = await SettingService.GetModuleSettingsAsync(ModuleState.ModuleId);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowFileManagement", _allowFileManagementSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRawHtml", _allowRawHtmlSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRichText", _allowRichTextSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_Theme", _themeSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_DebugLevel", _debugLevelSetting);
|
||||
settings = SettingService.SetSetting(settings, "QuillTextEditor_ToolbarContent", _toolbarContentSetting);
|
||||
await SettingService.UpdateModuleSettingsAsync(settings,ModuleState.ModuleId);
|
||||
}
|
||||
LoadSettings(true);
|
||||
|
||||
NavigationManager.NavigateTo(NavigationManager.Uri, true);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -153,6 +153,9 @@
|
|||
<data name="Placeholder" xml:space="preserve">
|
||||
<value>Enter Your Content...</value>
|
||||
</data>
|
||||
<data name="SaveSettings" xml:space="preserve">
|
||||
<value>Save Settings</value>
|
||||
</data>
|
||||
<data name="Settings" xml:space="preserve">
|
||||
<value>Settings</value>
|
||||
</data>
|
||||
|
|
|
|||
|
|
@ -459,4 +459,16 @@
|
|||
<data name="Enabled" xml:space="preserve">
|
||||
<value>Enabled</value>
|
||||
</data>
|
||||
<data name="Module" xml:space="preserve">
|
||||
<value>Module</value>
|
||||
</data>
|
||||
<data name="Page" xml:space="preserve">
|
||||
<value>Page</value>
|
||||
</data>
|
||||
<data name="Site" xml:space="preserve">
|
||||
<value>Site</value>
|
||||
</data>
|
||||
<data name="User" xml:space="preserve">
|
||||
<value>User</value>
|
||||
</data>
|
||||
</root>
|
||||
Loading…
Reference in New Issue
Block a user