SaveFormat RichText Editor in a dynamic form

[Oliver Pincus]

Hi,

I am using the Richtext Editor in a dynamically generated form using:

public RenderFragment CreateComponent() => builder => {}

The Editor is successfully added:

  builder.OpenComponent(0, typeof(SfRichTextEditor));

    ...

I want the added images to be saved as Base64.

That works fine with the code you provided:

 <SfRichTextEditor @ref="rteObj">
<ChildContent>
<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the RichTextEditor through quick toolbar.</p>
         <RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
         <RichTextEditorImageSettings SaveFormat="SaveFormat.Base64"></RichTextEditorImageSettings>
     </ChildContent>
 </SfRichTextEditor>

SaveFormat saveFormat = SaveFormat.Base64;
builder.AddAttribute(6, "SaveFormat", saveFormat);

Is there any option to set the SaveFormat in a dynamic form?

I tried 

SaveFormat saveFormat = SaveFormat.Base64;

builder.AddAttribute(6, "SaveFormat", saveFormat);

but this did not work for me.

Thanks!

[Vinitha Jeyakumar]

Hi Oliver Pincus,

Your requirement to use SaveFormat with dynamic rendering can be achieved by using the child renderFragment like below,

Code snippet:

@using Microsoft.AspNetCore.Components;

@using Syncfusion.Blazor.Buttons;

@using Syncfusion.Blazor.RichTextEditor;

<div id="component-container">

    @DynamicRender

</div>

<SfButton ID="dynamic-button" Content="Render TextBox" @onclick="RenderComponent"></SfButton>

@code {

    private RenderFragment DynamicRender { get; set; }

    public SaveFormat saveFormat = SaveFormat.Base64; 

    private RenderFragment CreateComponent() => builder =>

    {

        builder.OpenComponent(0, typeof(SfRichTextEditor));

        builder.AddAttribute(1, "Placeholder", "Enter your text");

        builder.AddAttribute(1, "ChildContent", (RenderFragment)((builder2) =>

      {

          builder2.OpenComponent(1, typeof(RichTextEditorImageSettings));

          builder2.AddAttribute(2, "SaveFormat", saveFormat);

          builder2.CloseComponent();

           }));

       

        builder.CloseComponent();

    };

    private void RenderComponent()

    {

        DynamicRender = CreateComponent();

    }

}

Regards,

Vinitha

[Oliver Pincus]

Thanks,  Vinitha. 

The above code works for me.

[Vinitha Jeyakumar]

Hi Oliver Pincus,

You are welcome.

Regards,

Vinitha