implement radzen text editor.

2025-09-05 20:36:50 +08:00
parent 966fc55594
commit e59d5fd339
13 changed files with 1069 additions and 4 deletions
--- a/Oqtane.Client/Modules/Controls/RadzenTextEditor.razor
+++ b/Oqtane.Client/Modules/Controls/RadzenTextEditor.razor
@ -0,0 +1,193 @@
+@using Microsoft.Extensions.Configuration
+@using Oqtane.Interfaces
+@using System.Text.RegularExpressions
+@using Radzen
+@using Radzen.Blazor
+
+@namespace Oqtane.Modules.Controls
+@inherits ModuleControlBase
+@implements ITextEditor
+@implements IDisposable
+@inject Radzen.ThemeService ThemeService
+@inject IRadzenEditorSettingService EditorSettingService
+@inject DialogService DialogService
+@inject NavigationManager NavigationManager
+@inject IStringLocalizer<Oqtane.Modules.Controls.RadzenTextEditor> Localizer
+
+<RadzenTheme Theme="@RadzenEditorDefinitions.DefaultTheme" />
+<RadzenComponents />
+<RadzenHtmlEditor @ref="_editor" Visible="_visible" Placeholder="@Placeholder" style="@($"height: {Height}px;")"
+                  @bind-Value="_value" Execute="OnExecute" class="rz-text-editor">
+    <ChildContent>
+        @_toolbar
+        @if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin))
+        {
+            <RadzenHtmlEditorCustomTool CommandName="Settings" Icon="settings" Title="@Localizer["Settings"]" />
+        }
+    </ChildContent>
+
+</RadzenHtmlEditor>
+
+@code {
+    private Oqtane.Modules.Controls.RadzenEditorInterop _interop;
+    private RadzenHtmlEditor _editor;
+    private string _value;
+    private bool _visible = false;
+    private string _theme;
+    private string _background;
+    private IList<string> _toolbarItems;
+    private RenderFragment _toolbar;
+
+    [Parameter]
+    public string Placeholder { get; set; }
+
+    [Parameter]
+    public bool ReadOnly { get; set; }
+
+    [Parameter]
+    public int Height { get; set; } = 450;
+
+    public string Name => "RadzenTextEditor";
+
+    public override List<Resource> Resources { get; set; } = new List<Resource>()
+    {
+        new Resource { ResourceType = ResourceType.Script, Url = "/_content/Radzen.Blazor/Radzen.Blazor.js", Location = ResourceLocation.Head },
+        new Resource { ResourceType = ResourceType.Script, Url = "/Modules/Oqtane.RadzenTextEditor/Resources/js/Interops/RadzenTextEditorInterop.js", Location = ResourceLocation.Head },
+    };
+
+    protected override void OnInitialized()
+    {
+        _interop = new Oqtane.Modules.Controls.RadzenEditorInterop(JSRuntime);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+        if (firstRender)
+        {
+            var interop = new Interop(JSRuntime);
+            await interop.IncludeLink("", "stylesheet", $"/Modules/Oqtane.RadzenTextEditor/Resources/css/radzentexteditor.override.css", "text/css", "", "", "");
+            await LoadSettings();
+            _visible = true;
+            StateHasChanged();
+
+            await _interop.Initialize(_editor.Element);
+
+            if (!string.IsNullOrEmpty(_theme))
+            {
+                ThemeService.SetTheme(_theme);
+            }
+
+            if (!string.IsNullOrEmpty(_background))
+            {
+                var backgroundColor = RadzenEditorDefinitions.TransparentBackgroundColor;
+                switch (_background)
+                {
+                    case "Light":
+                        backgroundColor = RadzenEditorDefinitions.LightBackgroundColor;
+                        break;
+                    case "Dark":
+                        backgroundColor = RadzenEditorDefinitions.DarkBackgroundColor;
+                        break;
+                }
+                await _interop.SetBackgroundColor(_editor.Element, backgroundColor);
+            }
+        }
+    }
+
+    public void Initialize(string content)
+    {
+        _value = !string.IsNullOrEmpty(content) ? content : string.Empty;
+        DialogService.OnOpen += OnDialogOpened;
+    }
+
+    public void Dispose()
+    {
+        if (DialogService != null)
+        {
+            DialogService.OnOpen -= OnDialogOpened;
+        }
+    }
+
+    public async Task<string> GetContent()
+    {
+        await Task.CompletedTask;
+
+        return _value;
+    }
+
+    private async Task LoadSettings()
+    {
+        var scope = await EditorSettingService.GetSettingScopeAsync(ModuleState.ModuleId);
+        var editorSetting = scope == 1
+            ? await EditorSettingService.LoadSettingsFromModuleAsync(ModuleState.ModuleId)
+            : await EditorSettingService.LoadSettingsFromSiteAsync(PageState.Site.SiteId);
+
+        _theme = editorSetting.Theme;
+        _background = editorSetting.Background;
+        _toolbarItems = editorSetting.ToolbarItems.Split(',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries).ToList();
+        _toolbar = SetupToolbarItems();
+    }
+
+    private RenderFragment SetupToolbarItems()
+    {
+        return builder =>
+        {
+            var sequence = 0;
+            foreach (var item in _toolbarItems)
+            {
+                if (RadzenEditorDefinitions.ToolbarItems.ContainsKey(item))
+                {
+                    sequence = RadzenEditorDefinitions.ToolbarItems[item](builder, sequence);
+                }
+            }
+        };
+    }
+
+    private async Task OnExecute(HtmlEditorExecuteEventArgs args)
+    {
+        if (args.CommandName == "InsertImage")
+        {
+            await InsertImage(args.Editor);
+        }
+        else if (args.CommandName == "Settings")
+        {
+            await UpdateSettings(args.Editor);
+        }
+    }
+
+    private async Task InsertImage(RadzenHtmlEditor editor)
+    {
+        await editor.SaveSelectionAsync();
+
+        var result = await DialogService.OpenAsync<FileManagerDialog>(Localizer["DialogTitle.SelectImage"], new Dictionary<string, object>
+        {
+            { "Filters", PageState.Site.ImageFiles }
+        });
+
+        await editor.RestoreSelectionAsync();
+
+        if (result != null)
+        {
+            await editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, result);
+        }
+    }
+
+    private async Task UpdateSettings(RadzenHtmlEditor editor)
+    {
+        await editor.SaveSelectionAsync();
+
+        var result = await DialogService.OpenAsync<SettingsDialog>(Localizer["Settings"], null, new DialogOptions { Width = "650px" });
+        if (result == true)
+        {
+            NavigationManager.NavigateTo(NavigationManager.Uri);
+        }
+
+        await editor.RestoreSelectionAsync();
+    }
+
+    private async void OnDialogOpened(string title, Type componentType, Dictionary<string, object> parameters, DialogOptions options)
+    {
+        await _interop.UpdateDialogLayout(_editor.Element);
+    }
+}