Rich Text Editor HTML export

2 Answers 334 Views
RichTextEditor
Kevin
Top achievements
Rank 1
Iron
Kevin asked on 20 Jul 2022, 08:11 AM | edited on 20 Jul 2022, 08:13 AM

Hello,

I have a question concerning the HTML export of the rich text editor.
I have a button where clicking on it will insert a span with the readonlyrange into my rich text editor.

My problem is when I'm trying to export it to HTML string to save it in DB I don't see my span with any special property to say that there is a readonlyrange attached to it.

Is there some way to get it when exporting into HTML format or can I export other field on the span such as the Tag property?
I would like some way when exporting into HTML that my span have some unique property to identify that this is a special read only span

Thank you.

Best regards.

2 Answers, 1 is accepted

Sort by
0
Accepted
Tanya
Telerik team
answered on 21 Jul 2022, 11:34 AM

Hi Kevin,

The read-only ranges are objects specific to the XAML format and they are not preserved when exporting to HTML. What I can suggest for preserving them is to change the HTML format and use XAML to store the documents. XAML is the native format of RadRichTextBox and all objects and properties are preserved there.

If you would like to stick to the HTML format, you could insert specific placeholder strings in the content prior to exporting a document and replace them with range objects just after importing.

Hope this is helpful.

Regards,
Tanya
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Kevin
Top achievements
Rank 1
Iron
answered on 21 Jul 2022, 12:44 PM

Hello Tanya,

Thank you for your answer but I need to stick to HTML format so only the second option can work for me
Is it possible to provide a quick example of what you are talking about please?

Thank you again.

Tanya
Telerik team
commented on 25 Jul 2022, 01:31 PM

Hello Kevin,

Following is an example of how you can replace the range start and end markers with '[' and ']' respectively, then bring back the ranges after importing the HTML:

RadDocumentEditor editor = new RadDocumentEditor(document);

var starts = document.EnumerateChildrenOfType<ReadOnlyRangeStart>().ToList();

foreach (var start in starts)
{
    document.CaretPosition.MoveToDocumentElementStart(start);
    editor.Insert("[");

    document.CaretPosition.MoveToDocumentElementEnd(start.End);
    editor.Insert("]");

    editor.DeleteReadOnlyRange(start);
}

HtmlFormatProvider provider = new HtmlFormatProvider();
string html = provider.Export(document);
var imported = provider.Import(html);

editor = new RadDocumentEditor(imported);
DocumentTextSearch search = new DocumentTextSearch(imported);

TextRange textRange = search.Find(Regex.Escape("["));

while (textRange != null)
{
    ReadOnlyRangeStart start = new ReadOnlyRangeStart();
    ReadOnlyRangeEnd end = new ReadOnlyRangeEnd();
    start.End = end;

    imported.CaretPosition.MoveToPosition(textRange.StartPosition);
    editor.Delete(false);
    editor.InsertInline(start);

    textRange = search.Find(Regex.Escape("]"), imported.CaretPosition);

    imported.CaretPosition.MoveToPosition(textRange.StartPosition);
    editor.Delete(false);
    editor.InsertInline(end);

    textRange = search.Find(Regex.Escape("["), imported.CaretPosition);
}

If the square brackets are not appropriate for the scenario you have, you can choose any other symbol or string and use the same logic for inserting and replacing them.

Hope this helps.

Tags
RichTextEditor
Asked by
Kevin
Top achievements
Rank 1
Iron
Answers by
Tanya
Telerik team
Kevin
Top achievements
Rank 1
Iron
Share this question
or