feat(Editor): add OnFileUpload parameter (#6638)

* Editor增加Upload回调

* refactor: 精简代码

* doc: 增加 OnFileUpload 回调方法说明

* doc: 增加默认焦点设置

* feat: 更新说明文档

---------

Co-authored-by: Argo Zhang <[email protected]>

Author: j4587698

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -70,7 +70,7 @@
     <PackageReference Include="BootstrapBlazor.Sortable" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.Splitting" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.SvgEditor" Version="9.0.3" />
-    <PackageReference Include="BootstrapBlazor.SummerNote" Version="9.0.4" />
+    <PackageReference Include="BootstrapBlazor.SummerNote" Version="9.0.6" />
     <PackageReference Include="BootstrapBlazor.TableExport" Version="9.2.6" />
     <PackageReference Include="BootstrapBlazor.Tasks.Dashboard" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.TcpSocket" Version="9.0.0" />

src/BootstrapBlazor.Server/Components/Routes.razor

@@ -1,5 +1,6 @@
 <Router AppAssembly="@typeof(Program).Assembly">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h3" />
     </Found>
 </Router>

src/BootstrapBlazor.Server/Components/Samples/Editors.razor

@@ -1,7 +1,9 @@
 @page "/editor"
+
 @inject SwalService SwalService
 @inject PackageVersionService VersionManager
 @inject IStringLocalizer<Editors> Localizer
+@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
 
 <h3>@Localizer["EditorsTitle"]</h3>
 
@@ -38,7 +40,7 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["EditorIsEditorTitle"]" Introduction="@Localizer["EditorIsEditorIntro"]" Name="IsEditor">
-    <Editor IsEditor="true" />
+    <Editor IsEditor="true" OnFileUpload="OnFileUpload" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["EditorHeightTitle"]" Introduction="@Localizer["EditorHeightIntro"]" Name="Height">

src/BootstrapBlazor.Server/Components/Samples/Editors.razor.cs

@@ -111,6 +111,17 @@ private async Task InsertHtmlAsync()
         await Editor.DoMethodAsync("pasteHTML", $"<h1>{Localizer["DoMethodAsyncPasteHTML"]}</h1>");
     }
 
+    private async Task<string> OnFileUpload(EditorUploadFile uploadFile)
+    {
+        var url = Path.Combine("images", "uploader", $"{Path.GetFileNameWithoutExtension(uploadFile.FileName)}-{DateTimeOffset.Now:yyyyMMddHHmmss}{Path.GetExtension(uploadFile.FileName)}");
+        var fileName = Path.Combine(WebsiteOption.CurrentValue.WebRootPath, url);
+        await uploadFile.SaveToFileAsync(fileName);
+
+        // 此处返回空字符串底层使用 URL.createObjectURL 方法创建 Blob 对象地址
+        // 实战中可以返回 SSO 地址或者 base64 字符串等
+        return "";
+    }
+
     private string? _editorCode;
 
     private async Task OnGetCode()
@@ -167,6 +178,14 @@ private AttributeItem[] GetAttributes() =>
             Type = "IEnumerable<EditorToolbarButton>",
             ValueList = " — ",
             DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "OnFileUpload",
+            Description = Localizer["OnFileUploadAttribute"],
+            Type = "Func<EditorUploadFile, Task>",
+            ValueList = " — ",
+            DefaultValue = " — "
         }
     ];
 }

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -2536,7 +2536,7 @@
     "EditorPlaceholderIntro": "The prompt message when a null value is set by setting the <code>Placeholder</code> attribute",
     "EditorPlaceholderDescription": "The default prompt is <b>Edit after clicking</b>",
     "EditorIsEditorTitle": "Display as a rich text edit box by default",
-    "EditorIsEditorIntro": "Set the component to be directly displayed as a rich text edit box by setting the <code>IsEditor</code> property",
+    "EditorIsEditorIntro": "Set the component to be directly displayed as a rich text edit box by setting the <code>IsEditor</code> property. When uploading an image, you can get the image information through the <code>OnFileUpload</code> callback method",
     "EditorHeightTitle": "Custom height",
     "EditorHeightIntro": "Set the height of the component by setting the <code>Height</code> property",
     "EditorOnValueChangedTitle": "Two-way binding",
@@ -2577,7 +2577,8 @@
     "DoMethodAsyncButton2": "Update to  H2",
     "DoMethodAsyncButton3": "Insert Image",
     "DoMethodAsyncButton4": "Get Code",
-    "DoMethodAsyncPasteHTML": "Here is the content inserted by the external button"
+    "DoMethodAsyncPasteHTML": "Here is the content inserted by the external button",
+    "OnFileUploadAttribute": "File upload callback method"
   },
   "BootstrapBlazor.Server.Components.Samples.EditorForms": {
     "Title": "EditorForm",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -2537,7 +2537,7 @@
     "EditorPlaceholderIntro": "通过设置 <code>Placeholder</code> 属性来设置空值时的提示消息",
     "EditorPlaceholderDescription": "默认提示是 <b>点击后进行编辑</b>",
     "EditorIsEditorTitle": "默认显示为富文本编辑框",
-    "EditorIsEditorIntro": "通过设置 <code>IsEditor</code> 属性来设置组件直接显示为富文本编辑框",
+    "EditorIsEditorIntro": "通过设置 <code>IsEditor</code> 属性来设置组件直接显示为富文本编辑框，上传图片时可以通过 <code>OnFileUpload</code> 回调方法获得图片信息",
     "EditorHeightTitle": "自定义高度",
     "EditorHeightIntro": "通过设置 <code>Height</code> 属性来设置组件高度",
     "EditorOnValueChangedTitle": "双向绑定",
@@ -2578,7 +2578,8 @@
     "DoMethodAsyncButton2": "将段落修改为 H2",
     "DoMethodAsyncButton3": "添加一张图片",
     "DoMethodAsyncButton4": "获得组件内容",
-    "DoMethodAsyncPasteHTML": "这里是外部按钮插入的内容"
+    "DoMethodAsyncPasteHTML": "这里是外部按钮插入的内容",
+    "OnFileUploadAttribute": "文件上传回调方法"
   },
   "BootstrapBlazor.Server.Components.Samples.EditorForms": {
     "Title": "EditorForm 表单组件",