How can I keep the previous formatting in the use of the insertHtml function?

1 Answer 55 Views
Editor
Sebahattin
Top achievements
Rank 1
Iron
Sebahattin asked on 09 Feb 2023, 03:34 PM | edited on 10 Feb 2023, 12:31 PM

Hallo,
i added a custom tool in the editor and am using it to add horizontal tab.
I'm using inserthtml for this, but after adding the tab span, the previous format isn't retained.

How can I add the span for tab inside the previous format span? Or in other words, how can I continue the previous format?

any ideas?

You can test it like this:
1- press the custom tab tool button to activate the tab key
2- enter a text and make font size eg. 16px
3- then press tab key on keyboard
4- then enter a new text again

formatting is lost



Example:
Tab on/off | Kendo UI Dojo (telerik.com)


function onTabKeyClicked(e){ if (isTabOn){ e.preventDefault(); editor.exec("inserthtml", { value: '<span style="white-space:pre;tab-size:0.25in;">&#9;</span>' });
} }


thank you in advance

Sebahattin
Top achievements
Rank 1
Iron
commented on 13 Feb 2023, 09:50 AM

Maybe this solution will work:
editor.paste('<span style="white-space:pre;tab-size:0.25in;">&#9;</span>', { split: false });

thanks everyone
Sebahattin
Top achievements
Rank 1
Iron
commented on 13 Feb 2023, 10:14 AM


unfortunately it didn't work, pressing the tab key after text2 moves the cursor to the beginning of tex2.
Sebahattin
Top achievements
Rank 1
Iron
commented on 13 Feb 2023, 12:58 PM


var editor = $(id).data("kendoEditor");
var range = editor.getRange();
editor.selectRange(range);
editor.paste('<span style="white-space:pre;tab-size:0.25in;">&#9;</span>', { split: false });

I think that's how it works, I'm testing it.
Neli
Telerik team
commented on 14 Feb 2023, 10:16 AM

Hi Sebastian,

Another approach that you could test is to use the insertHtml command and insert the Tab using "&emsp;". Below is an example:

editor.exec("inserthtml", { value: "&emsp;" });

Here is a Dojo where the behavior is demonstrated. 

I hope this helps.

Regards, Neli

1 Answer, 1 is accepted

Sort by
0
Sebahattin
Top achievements
Rank 1
Iron
answered on 01 Mar 2023, 12:31 PM | edited on 01 Mar 2023, 01:45 PM

what i actually want to do is add it inside the spani format range i created for the tab. In other words, adding the tab code where the cursor is, but I was not successful. And of course, no other values can be entered in the tab span I created.

tab span:

<span style="white-space:pre;tab-size:0.25in;">&#9;</span>


the result should be like this:

<span style="font-family:Calibri;font-size:9pt;color:#000000;"><strong>text1<span style="white-space:pre;tab-size:0.25in;">&#9;</span>text2</strong></span>
Sebahattin
Top achievements
Rank 1
Iron
commented on 01 Mar 2023, 12:46 PM

Or how do you apply a method for tabulator in html?
Georgi Denchev
Telerik team
commented on 06 Mar 2023, 09:26 AM

Hi, Sebahattin,

I am looking at the Dojo that you provided initially:

https://dojo.telerik.com/@sarslan/epefAziC 

And the logic seems to be working exactly how you want it to:

Were you successful in resolving the problem on your own, or is there something else that is missing?

Best Regards,

Georgi

Tags
Editor
Asked by
Sebahattin
Top achievements
Rank 1
Iron
Answers by
Sebahattin
Top achievements
Rank 1
Iron
Share this question
or