RTE get value on browser refresh

Question

Hello,

I would like do get the value of the RTE when the browser refresh button is clicked. So far a solution that works is setting SaveInterval to some value (like 1000) and saving the current value. However, this turns out to be very slow when I start adding pictures as Base64. Is there any nice way to get the current value only when I need it? I am using CircuitHandlerService to attach logic on browser refresh but when I get the Value property of the RTE object it is not the current value but the previously saved one.

Pandiyaraj Muniyandi · Accepted Answer

Hi Ivan, 
 
Good day to you. 
 
The base64 string image suitable for tiny images, if you’re trying to insert large size base64 string images browser will take some time to process it. So base64 string value update into Rich Text Editor takes some delay. 
 
Note: This is the behaviour of a base64 image in a web browser. 
 
Reference links:https://stackoverflow.com/a/11402374 
https://stackoverflow.com/a/13018239 
 
If you’re still facing issues with tiny images, kindly share the issue replicate sample to us, which help us to provide the solution at earliest. 
 
Regards, 
Pandiyaraj

Revanth Krishnan · Answer

Hi Ivan, Greetings from Syncfusion support. We have validated your query “Is there any nice way to get the current value only when I need it? I am using CircuitHandlerService to attach logic on browser refresh but when I get the Value property of the RTE object it is not the current value but the previously saved one”. The Rich Text Editor value can be get using the `Value` API which is a two-way binding property, but not using the Rich Text Editor’s object. The value should be assigned to a variable and the `@bind` should be used to reflect the Rich Text Editor value in the variable as it is a two-way binding property. We have prepared a sample to get the Rich Text Editor value when ever needed, Code Snippet: private string RteValue = @"

Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.

API’s:

MaxLength - allows to restrict the maximum length to be entered.
ReadOnly - allows to change it as non-editable state.
Enabled - enable or disable the RTE component.
EnableHtmlEncode - Get the encoded string value through value property and source code panel
GetValue - get the value of RTE.

"; private async Task GetValueClick() { this.Content = this.RteValue; await this.DialogObj.Show(); } Sample: https://www.syncfusion.com/downloads/support/forum/159290/ze/RTE_Value-1357823850 Documentation Link: https://blazor.syncfusion.com/documentation/rich-text-editor/data-binding/#two-way-data-binding Please check the above code snippet, documentation and the sample and let us know if it satisfy your requirement. Regards, Revanth

Krasimir Ivanov · Answer

Yes, it normally works. However, in the case where I attach to a CircuitHandlerService it doesn't. My code is the following:

This is for the component:

protected override void OnInitialized()

{

base.OnInitialized();

// Subscribe to the event handler

// this is to save description on browser refresh or close

(circuitHandler as CircuitHandlerService).CircuitsChanged += HandleCircuitsChanged;

}

public async Task SaveEditor()

{

await this.SaveAsync();

}

public void HandleCircuitsChanged(object sender, EventArgs args)

{

this.InvokeAsync(async () => await SaveEditor());

}

This is for CircuitHandlerService.cs :

public class CircuitHandlerService : CircuitHandler

{

public event EventHandler CircuitsChanged;

protected virtual void OnCircuitsChanged()

=> CircuitsChanged?.Invoke(this, EventArgs.Empty);

public CircuitHandlerService()

{

}

public override Task OnCircuitClosedAsync(Circuit circuit,

CancellationToken cancellationToken)

{

this.OnCircuitsChanged();

return base.OnCircuitClosedAsync(circuit,

cancellationToken);

}

When I access the Description property in SaveAsync its value is the previous value that was stored in Description.

Revanth Krishnan · Answer

Hi Ivan, 
 
Good day to you.   
  
Currently, we are checking with the shared code snippet. We will update you with further details within two business days on or before November 5th 2020.  
  
We appreciate your patience until then.  
     
Regards, 
Revanth

Indrajith Srinivasan · Answer

Hi Ivan, 
 
Good day to you, 
 
By default, Rich Text Editor value will be updated by a minimal timeout(10000). Can you try setting, the SaveInterval property as 1 for the editor to update the value immediately and try using your CircuitHandlerService ? 
 
If you are still facing the reported issue, can you please replicate the reported issue in the already shared sample and revert back to us. So that we can validate and provide solution at earliest. 
 
Regards, 
Indrajith

Krasimir Ivanov · Answer

If I set SaveInterval to 1 the rte becomes very slow when I upload a couple of base64 files but it works. I wanted to see if there is a faster alternative.