Update the descriptions and content of the RadzenHtmlEditor demos.

radzenhq · Sep 2, 2024 · 519c133 · 519c133
1 parent 9f62860
commit 519c133
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 62 deletions.
diff --git a/RadzenBlazorDemos/Pages/HtmlEditorCustomToolsSet.razor b/RadzenBlazorDemos/Pages/HtmlEditorCustomToolsSet.razor
@@ -13,61 +13,5 @@
 </RadzenHtmlEditor>
 
 @code {
-    string value = @"
-    <h1>Radzen.Blazor Getting Started Instructions</h1>
-    <h2>1. Install</h2>
-    <p>
-        Radzen Blazor Components are distributed as the <a href=""https://www.nuget.org/packages/Radzen.Blazor/"">Radzen.Blazor</a> nuget package.
-    </p>
-    <p>
-        You can add them to your project in one of the following ways
-    </p>
-    <ul>
-        <li>Install the package from command line by running <code>dotnet add package Radzen.Blazor</code></li>
-        <li>Add the project from the Visual Nuget Package Manager.</li>
-    </ul>
-    <h2>2. Import the namespace</h2>
-    <p>
-        Open the <code>_Imports.razor</code> file of your Blazor application and add these two lines <code>@using Radzen</code> and <code>@using Radzen.Blazor</code>.
-    </p>
-    <h2>3. Include a theme</h2>
-    <p>
-        Open <code>Pages\_Layout.cshtml</code> (Blazor Server .NET 6), <code>Pages\_Host.cshtml</code> (Blazor Server .NET 7) or <code>wwwroot/index.html</code> (Blazor WebAssembly)
-         and include a theme CSS file by adding this snippet
-        <code>&lt;link rel=""stylesheet"" href=""_content/Radzen.Blazor/css/default-base.css""&gt;</code>
-        This version requires only the Radzen Blazor CSS. Optionally you can include Bootstrap.
-    </p>
-    <p>
-        Alternatively you can include <code>&lt;link rel=""stylesheet"" href=""_content/Radzen.Blazor/css/default.css""&gt;</code> which embeds Bootstrap.
-    </p>
-    <h2>4. Include Radzen.Blazor.js</h2>
-    <p>
-        Open the <code>_Host.cshtml</code> file (server-side Blazor) or <code>wwwroot/index.html</code> (client-side WebAssembly Blazor) and include this snippet <code>&lt;script src=""_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)""&gt;&lt;/script&gt;</code>
-    </p>
-    <h2>5. Use a component</h2>
-    <p>
-        Use any Radzen Blazor component by typing its tag name in a Blazor page e.g. <code>&lt;RadzenButton Text=""Hi""&gt;&lt;/RadzenButton&gt;</code>
-    </p>
-    <h4>Setting a property</h4>
-<pre>
-<code>
-&lt;RadzenButton Text=""@text""&gt;&lt;/RadzenButton&gt;
-@code {
-  string text = ""Hi"";
-}
-</code>
-</pre>
-    <h4>Handing events</h4>
-<pre>
-<code>
-&lt;RadzenButton Click=""@ButtonClicked"" Text=""Hi""&gt;&lt;/RadzenButton&gt;
-@code {
-  void ButtonClicked()
-  {
-    //
-  }
-}
-</code>
-</pre>
-    ";
+    string value = @"<h1>Hello World!</h1>";
 }
diff --git a/RadzenBlazorDemos/Pages/HtmlEditorGetSetValue.razor b/RadzenBlazorDemos/Pages/HtmlEditorGetSetValue.razor
@@ -1,9 +1,17 @@
-<RadzenHtmlEditor @bind-Value=@htmlValue style="height: 300px;" Input=@OnInput Change=@OnChange Paste=@OnPaste Execute=@OnExecute UploadUrl="upload/image" />
+<RadzenHtmlEditor @bind-Value=@htmlValue style="height: 450px;" Input=@OnInput Change=@OnChange Paste=@OnPaste Execute=@OnExecute UploadUrl="upload/image" />
 
 <EventConsole @ref=@console />
 
 @code {
-    string htmlValue = "<h1>Hello World!</h1>";
+    string htmlValue = @"<h2 style=""text-align:center"">Accelerated, smarter, and cost-effective Blazor development</h2>
+    <h3 style=""text-align:center"">Radzen Blazor Studio provides tons of productivity gains for Blazor developers</h3>
+    <div style=""text-align:center"">
+        <img alt=""Radzen Blazor Studio"" src=""images/radzen-blazor-studio-dark.png"" width=""300"">
+    </div>
+    <h4 style=""text-align:center"">Get started today. Radzen Blazor Studio is free to use.</h4>
+    <div style=""text-align:center"">
+        <a href=""https://www.radzen.com/blazor-studio/download/"" target=""_blank"" title=""Get Radzen Blazor Studio for Windows, Mac or Linux"">Download Now</a>
+    </div>";
 
     EventConsole console;
 

diff --git a/RadzenBlazorDemos/Pages/HtmlEditorPage.razor b/RadzenBlazorDemos/Pages/HtmlEditorPage.razor
@@ -66,10 +66,16 @@ The Radzen HtmlEditor supports the following tools:
     <HtmlEditorCustomToolsSet />
 </RadzenExample>
 
-<RadzenText Anchor="html-editor#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
-    Upload files
+<RadzenText Anchor="html-editor#upload" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
+    Upload images
 </RadzenText>
-<RadzenExample ComponentName="HtmlEditor" Example="HtmlEditorUploadUrl">
+<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
+    You can insert images by pasting them or using the <strong>RadzenHtmlEditorImage</strong> tool. By default images are inserted as base64 encoded strings.
+    To upload images to the server you need to implement a file upload endpoint and set the <code>UploadUrl</code> property of the RadzenHtmlEditor component:
+    <code>&lt;RadzenHtmlEditor @@bind-Value=@@htmlValue UploadUrl="upload/image" /&gt;</code>.
+    For a sample implementation check the <code>UploadController.cs</code> tab.
+</RadzenText>
+<RadzenExample ComponentName="HtmlEditor" Example="HtmlEditorUploadUrl" AdditionalSourceCodePages="@(new [] { "../../RadzenBlazorDemos.Host/Controllers/UploadController.cs"})" >
     <HtmlEditorUploadUrl />
 </RadzenExample>
 <RadzenText Anchor="html-editor#focus" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">