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

[Sebahattin]

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]

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

thanks everyone

[Sebahattin]

unfortunately it didn't work, pressing the tab key after text2 moves the cursor to the beginning of tex2.

[Sebahattin]

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]

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: " " });

Here is a Dojo where the behavior is demonstrated. 

I hope this helps.

Regards, Neli

[Sebahattin]

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]

Or how do you apply a method for tabulator in html?

[Georgi Denchev]

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