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

Issue facing in IE-10 browser for editing Nodes

3 Answers 27 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Krishna
Top achievements
Rank 1
Krishna asked on 06 Mar 2014, 03:01 PM
Hi Team,

We are developing an Intuition platform, having Auto complete functionality in the editor. Here we are handling the editor data as expressions,

In the editor there will be any number of variables, operators, text and comments can use by the user. Each line is separated in <p> and inside that all the nodes are formatted.

For Example:
Variables and Operators placed in <a> tags
Comments and default text in <span> tags 

We are having typing and Editing functionality, if the typing text is matching in the variable or operator text then we have to place the string in <a> tag.
When the user can edit the expression anywhere in the editor. If they edit the variable text,
 For example:

Consider "Alpha0" is a variable which is formatted to <a href="#" style="color: #a50;">Alpha0</a>, the user edited the text to "Alha0", after the editing the node formatting to <Span style=" color: black;">Alha0</span> 

The color format change is working when typing and editing in Chrome. In IE 10 is not supporting in all the cases.

If I try to update in the middle of the expression the caret position is jumping to first node. The below code is using for getting the caret position

var selection = editor.getSelection();
var selectedElement = selection.focusNode;
var range;

if (selectedElement.nodeName != 'P'
&& selectedElement.nodeName != 'DIV') {
range = editor.getSelection().getRangeAt(0).endOffset;
} else if ((selectedElement.nodeName == 'P' || selectedElement.nodeName == 'A')) {
var index = editor.getSelection().getRangeAt(0).endOffset;
if (index != 0) {
selectedElement = selectedElement.childNodes[index - 1];
range = selectedElement.textContent.length;
} else if (selectedElement.childNodes.length > 0) {
selectedElement = selectedElement.childNodes[index];
range = index;
}
}

If the text is editing in the middle of <a> tag it should change to <span> tag based on the validation, in that case editor's caret position getting as "0". So it jumping to the first node. Please help us with this issue.

Thanks in Advance.






















3 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 10 Mar 2014, 10:15 AM
Hello Krishna,

When you change the editor text, you need to persist the caret position manually. There are some internal methods that might make your job easier, but take note that they are not documented at this time. See the following snippet on how to change the tag dynamically.

Regards,
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Krishna
Top achievements
Rank 1
answered on 10 Mar 2014, 01:23 PM
Hi Alex Gyoshev,

Thanks for you reply. 

here we are implementing the above logic by using Editable Div but I saw your snippet is using Text editor.

<div id="calceditor" contenteditable="true" spellcheck="false">

Please let us know is there any specific way to support IE 10 for dynamic tag changes and get the position of the cursor for avoid caret jumping.

I have attached the sample expression with color format.

Thanks in Advance.










0
Alex Gyoshev
Telerik team
answered on 11 Mar 2014, 07:20 AM
Hello Krishna,

Please submit a sample that shows the problem you are facing and the steps required to reproduce it.

Regards,
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Editor
Asked by
Krishna
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Krishna
Top achievements
Rank 1
Share this question
or