Kendo Editor RTL and LTR directions

[suresh]

I am giving option LTR and RTL text direction in Kendo Editor.

While clicking on particular icon, i have to get the selected area text and apply dir=rtl or dir="ltr" to the selected element. But i can able to get the selected text with the following code.

$(this).data("kendoEditor").getRange()

But i have to select the tag of this selected area and apply the direction attribute.

Can anyone help me to resolve this?

[Dimo]

Hello Suresh,

The described task requires getting familiar with DOM ranges and the DOM node API:

https://developer.mozilla.org/en/docs/Web/API/Range

https://developer.mozilla.org/en-US/docs/Web/API/Node

Here is a simplified example to start with. Feel free to modify according to your needs.

var range = $("#editor").data("kendoEditor").getRange();

// first, we take the common ancestor of the range's start and end container
var ancestor = range.commonAncestorContainer;
if (range.startContainer.nodeType == 3 && range.startContainer.parentNode == range.endContainer) {
   // Selection is within one DOM element, but ends and the element's end. In this case the common ancestor will be one level up than needed.
   ancestor = range.endContainer;
} else if (range.commonAncestorContainer.nodeType == 3) {
   // Selection is within one DOM element and is somewhere in the middle. In this case the common ancesotor is a text node, so we need its parent.
   ancestor = ancestor.parentNode;
}

$(ancestor).css("direction", "rtl");

Regards,
Dimo
Telerik

 

 

[suresh]

Hi Dimo,

Thanks for your response. Its really helpful. Now am able to add the direction attribute to the selected tag. But how can we do it if they selected 3 paragraph and applying the direction.



var editor = $(this).data("kendoEditor");

                       var range = editor.getRange();

                       var preValue = editor.value();

                       //if (range != "") {

                       // first, we take the common ancestor of the range's start and end container

                       var ancestor = range.commonAncestorContainer;

                       if (range.commonAncestorContainer.nodeType == 1) {

                           if (range == '') {

                               editor.exec("inserthtml", { value: "<p dir='ltr'></p>" });

                           }

                           else {



                           }

                       }

                       else {

                           if (range.startContainer.nodeType == 3 && range.startContainer.parentNode == range.endContainer) {

                               // Selection is within one DOM element, but ends and the element's end. In this case the common ancestor will be one level up than needed.

                               ancestor = range.endContainer;



                           } else if (range.commonAncestorContainer.nodeType == 3) {

                               // Selection is within one DOM element and is somewhere in the middle. In this case the common ancesotor is a text node, so we need its parent.

                               if (ancestor.localName == null && ancestor.parentNode.localName == 'body') {

                                   editor.value(preValue.replace(ancestor.nodeValue, "<p dir='ltr'>" + ancestor.nodeValue + "</p>"));

                               }

                               else {

                                   ancestor = ancestor.parentNode;

                               }

                           }

                           if (ancestor.localName != null) {

                               $(ancestor).css("direction", "ltr");

                           }

                       }


it working fine when I select one para and apply direction attribute. but its not working when I select more than one paragraph and apply direction attribute. Could you please help me to fix this?

[suresh]

Hi Dimo,

Thanks for your response. Its really helpful. Now am able to add the direction attribute to the selected tag. But how can we do it if they selected 3 paragraph and applying the direction.

 

var editor = $(this).data("kendoEditor");

                       var range = editor.getRange();

                       var preValue = editor.value();

                       //if (range != "") {

                       // first, we take the common ancestor of the range's start and end container

                       var ancestor = range.commonAncestorContainer;

                       if (range.commonAncestorContainer.nodeType == 1) {

                           if (range == '') {

                               editor.exec("inserthtml", { value: "<p dir='ltr'></p>" });

                           }

                           else {

                                 

                           }

                       }

                       else {

                           if (range.startContainer.nodeType == 3 && range.startContainer.parentNode == range.endContainer) {

                               // Selection is within one DOM element, but ends and the element's end. In this case the common ancestor will be one level up than needed.

                               ancestor = range.endContainer;

 

                           } else if (range.commonAncestorContainer.nodeType == 3) {

                               // Selection is within one DOM element and is somewhere in the middle. In this case the common ancesotor is a text node, so we need its parent.

                               if (ancestor.localName == null && ancestor.parentNode.localName == 'body') {

                                   editor.value(preValue.replace(ancestor.nodeValue, "<p dir='ltr'>" + ancestor.nodeValue + "</p>"));

                               }

                               else {

                                   ancestor = ancestor.parentNode;

                               }

                           }

                           if (ancestor.localName != null) {

                               $(ancestor).css("direction", "ltr");

                           }

                       }


it working fine when I select one para and apply direction attribute. but its not working when I select more than one paragraph and apply direction attribute. Could you please help me to fix this?

[Dimo]

Hello Suresh,

In the case of three selected paragraphs, do one of the following:

1) iterate the 3 paragraphs and apply a direction to each of them. Start from the range.startContainer (or its parent DOM node if the startContainer is a text node) and use nextSibling until you reach range.endContainer.

2) wrap the paragraphs in a new container (<div>) and apply a direction to it.

There are basically an unlimited number of possible scenarios. That's why I recommended the provided ranges' and DOM nodes' APIs, which will help you.

Regards,
Dimo
Telerik

 

 

[suresh]

Hi Dimo,

I am able to apply the direction attribute now after looking into DOM objects..

Thank you so much for your help.

Suresh.