Implementing Equations as PNG or JPEG image in RichText Editor

[SyedTech]

Hi,

I want to develop a solution for inserting, editing or deleting equations from within RichText Editor using version 18.1.0.36-beta or above.

What I want to do is:

A toolbar button for inserting, editing or deleting equations within the HTML Text.

When a user clicks on the toolbar button an equation editor popups a dialog and the user can type equation in Latex format then presses OK and equation editor returns PNG or JPEG image URL address like https://example.com/equation123.png. It is just like inserting an image in RichText editor.

I have a well-designed equation editor in Javascript that does the job. I have added a toolbar button that invokes this equation editor. This works fine.

My Goals:

I want to trigger a custom double-click instead of the default event on an equation image that reads the SRC, ALT and TITLE attributes of the image and invokes the equation editor instead of the default image editor.

If a user modifies the equation it replaces the image SRC, ALT and TITLE tags with the new image information.

I need to parse the image tag like SRC, ALT, and TITLE of the selected image and send it as an equation editor parameter.

If all goes well I will share my components with the Syncfusion community.

I hope I have explained it well

Best regards

[Indrajith Srinivasan]

Hi Syed,  

Thanks for contacting Syncfusion support,

Currently, we are validating your reported scenario and we will get back to you with further details in two business days by 1^st April. 

Regards,
Indrajith 

[SyedTech]

Hi Indrajith,

Take your time, I am waiting...

Best regards

[Indrajith Srinivasan]

Hi Syed,

Thanks for your patience,

We have tried possible ways to meet your requirements with the image editing options (Alt name, Title & Src Url) and edit the existing image when the options are changed. But we are unable to meet your exact requirements with Rich Text Editor. Also in order to meet the exact requirements, binding the double click for image and modifying the image properties requires DOM access which is not possible with Blazor.


Regards, 

Indrajith 

[SyedTech]

Hi,

How image property editor managed it?

It does all that I want to implement.

Regards

[Indrajith Srinivasan]

Hi SyedTech,

Sorry for the delayed response,

As we said earlier we can achieve your exact requirement with DOM access elements value update. We have achieved your requirement with a customized dialog showing your recommended options of the current image and once modifying it the changes are applied to the image element. We used the JsInterop concept in blazor to achieve this scenario.

Sample: https://www.syncfusion.com/downloads/support/forum/152834/ze/RTE_equation1072306508

Can you please try out the above solution and let us know if it meets your requirements?

Regards, 

Indrajith