This is a migrated thread and some comments may be shown as answers.

Kendo Editor RTL and LTR directions

5 Answers 298 Views
Editor
This is a migrated thread and some comments may be shown as answers.
suresh
Top achievements
Rank 1
suresh asked on 21 Apr 2014, 11:24 AM
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?

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 22 Apr 2014, 10:56 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
suresh
Top achievements
Rank 1
answered on 23 Apr 2014, 09:44 AM
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?
0
suresh
Top achievements
Rank 1
answered on 23 Apr 2014, 09:46 AM
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?
0
Dimo
Telerik team
answered on 25 Apr 2014, 06:34 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
suresh
Top achievements
Rank 1
answered on 03 May 2014, 12:18 PM
Hi Dimo,

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

Thank you so much for your help.

Suresh.
Tags
Editor
Asked by
suresh
Top achievements
Rank 1
Answers by
Dimo
Telerik team
suresh
Top achievements
Rank 1
Share this question
or