RichTextEditor to DOCIO, well formatted xhtml error

[Petr]

Dear all, 

I took advantage of the new File Browser component button in the RTE to work with images.

I collect user input through RTE, save it to db, and eventually generate a document.

When writing to document, I've encountered the "DocIO support only welformatted xhtml" error. 

This is my RTE component (xhtml enabled):

 @Html.EJS().RichTextEditorFor(model => model.Text).ToolbarSettings(e =>

                    e.Items((object)ComponentSettings.GetRTETools())).FileManagerSettings(e => { e.Enable(true);                     e.AjaxSettings((object)ViewBag.AjaxSettings); }).EnableXhtml(true).PasteCleanupSettings(p => p.PlainText(true)).Render()

                   

And this is the html generated by the RTE when inserting the image:

<div><p style="cursor: auto;"><img src="/FileManagerRTE/GetImage/9307?path=/Images/K-2455-01zm.jpg" class="e-rte-image e-imginline e-resize" alt="K-2455-01zm.jpg" width="755" height="634" style="min-width: 0px; max-width: 1569px; min-height: 0px; max-height: 1164px;">  </p></div>

Could you give me a hint of what is the correct way to get my image from RTE to DocIO?

Thank you very much,

Petr

[Revanth Krishnan]

Hi Petr, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “When using Rich Text Editor value in the DOCIO, I've encountered the "DocIO support only well-formatted XHTML" error.” 

 

This error occurred because the retrieved value from the Rich Text Editor is not well-formatted. This can be resolved by enabling the ‘EnableXhtml’ property and then using the ‘getXhtml’ public method to retrieve the well-formatted Rich Text Editor value. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<button id="rteValue">Get well formatted RTE Value</button> 

 

@Html.EJS().RichTextEditor("toolbar").EnableXhtml(true).ToolbarSettings(e => e.Items((object)ViewBag.tools)).Created("created").Render() 

 

<script> 

    var rteObj; 

    function created() { 

        rteObj = this; 

    } 

    document.getElementById('rteValue').addEventListener('click', getRTEValue); 

    function getRTEValue() { 

        var a = rteObj.getXhtml(); 

    } 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Rich_Text_Editor_MVC_App703119122 

 

Please check the above code snippet and the sample and let us know if it resolves the issue. 

 

Regards, 

Revanth 

[Petr]

Hello Revanth,

thank you for the tip. This works well in terms of xhtml compliance, which is excellent. 

However, the image is not displayed when inserted as html through DocIO - all I see is following error image:

Is there any simple way to fix it?

Best regards,

Petr

[Revanth Krishnan]

Hi Petr, 

 

 

Good day to you. 

 

 

We have validated your query “The image is not displayed when inserted as html through DocIO”. 

 

By default, when inserting the images initially in the Rich Text Editor, the image are inserted as ‘blob’ format which cannot be used by loading the ‘blob’ string again as HTML(from DOCIO). This can be resolved by inserting images as ‘base64’ by setting the InsertImageSetting’s ‘SaveFormat’ property. We have prepared a sample for your reference, 

 

Code Snippet: 

@Html.EJS().RichTextEditor("toolbar").EnableXhtml(true).InsertImageSettings(obj => obj.SaveFormat(SaveFormat.Base64)).ToolbarSettings(e => e.Items((object)ViewBag.tools)).Created("created").Render() 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Rich_Text_Editor_MVC_App1140137994 

 

Note: You can also upload the images to the server and then display it from the local file, please check the below documentation for reference. 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/image/#server-side-action 

 

Regards, 

Revanth