Using rangy with Kendo Editor

Question

I'm trying to make a twitter-like rich-text editor wherein the characters that go over the character limit are highlighted. I saw this question and tried editing it.

I used Kendo UI's Editor and also Tim Down's rangy library. Using Kendo's inline editor, the rangy library works great.

<div contenteditable="true" class="rte"></div>

Although I need it to work when attached to a textarea.

<textarea class="rte" maxlength="50"></textarea>

The rangy library doesn't work on the textarea quite like the inline editor maybe because Kendo uses an iframe for this. The characters that go over the limit are highlighted but the cursor goes back to the start of the content.

Does anyone know how to fix this? Here's a sample I've been working on: http://jsfiddle.net/G4jn7/12/

Answer 1

This is easily fixed: you just need to pass in editor into the rangy.getSelection() call to tell it to get the selection from the iframe's rather than the main document.

Demo: http://jsfiddle.net/G4jn7/13/

In rangy.getSelection(x), x can be any of several things to identify the document to use: a Window, Document, an <iframe> element or a non-iframe element within the document.