We Keep Coding

Convert to markdown but how to set caret appropriate (in Javascript)?

I can not come up with a suitable solution...
<p class="session" contenteditable="true">
Everything contained <b>**within**</b> this div is editable in browsers
that support <code>`HTML5`</code>. Go on, give it a try: click it and
start typing.
</p>
I want to add the appropriate HTML-tags while typing.
Of course it is no problem doing it by simple regex replacements. But I have problems setting the caret at the right place.
Say, in the example above, I want to emphasize the word "try". While typing the right * first and then the left star *, the text is converted to <i>*try*</i> but I want to preserve the position of the caret (set the the caret after the left *). And of cource vice versa, where the right * is set at last.
I find it more difficult to set the part contained <b>**within**</b> this say underlined. _contained <b>**within**</b> this_ becomes <u>_contained <b>**within**</b> this_</u>. So we are not in the same node.
I can think of complicated solutions, but since I am no expert in these text conversions techniques (range, window selection etc.) I wonder if there is a well known pratice of doing it.

Check out the Fiddle
I have tried to get the caret position as a first step and in the second step i have tried to put the caret back to the position .
$('.session').keyup(function(){
//alert("happening");
var sel = window.getSelection();
var offset=sel.anchorOffset;
// you can change the text in div by uncommeting the line below and replace your text with mathcing regex .
//$('.session').text($('.session').text().replace('/(\*.\*)+/','<i>$1<i>'));
setCaret(offset);
$('.session')
});
function setCaret(offset) {
var el = $('.session');
//alert();
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el[0].childNodes[0],offset);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
You need to figure out how to change the text in the div as per your needs. While replacing the text inside the div also maintain the formatting so that the solution works.

Set the caret at the end of the content in Froala 2

I'm using Froala 2 and the documentation doesn't seem to have anything that implies a simple way to set the location of the caret, let alone at the beginning or end. I'm trying to seed the editor instance with a little content in certain cases and when I do using html.set, the caret just stays where it is at the beginning and I want to move it to the end. The internet doesn't seem to have anything helpful around this for v2.

Froala support provided an answer for me that works:
var editor = $('#edit').data('froala.editor');
editor.selection.setAtEnd(editor.$el.get(0));
editor.selection.restore();

As far as I know, Froala 2 doesn't provide any API to do this, but you can use native JavaScript Selection API.
This code should do the job:
// Selects the contenteditable element. You may have to change the selector.
var element = document.querySelector("#froala-editor .fr-element");
// Selects the last and the deepest child of the element.
while (element.lastChild) {
element = element.lastChild;
}
// Gets length of the element's content.
var textLength = element.textContent.length;
var range = document.createRange();
var selection = window.getSelection();
// Sets selection position to the end of the element.
range.setStart(element, textLength);
range.setEnd(element, textLength);
// Removes other selection ranges.
selection.removeAllRanges();
// Adds the range to the selection.
selection.addRange(range);
See also:
How to set caret(cursor) position in contenteditable element (div)?
Set caret position at a specific position in contenteditable div

Rangy applyToSelection at the cursor if the selected range is empty?

This feels like a stupid question.
I'm using the excellent Rangy library in javascript to apply CSS classes from a dropdown to selected text, as if in a rich text editor.
But if the user is simply typing text without making a selection, and they apply a class via a dropdown, rangy's "applyToSelection" does nothing since,presumably, it's an empty range.
I know there are difficult ways to add a proper div at the selected cursor location and enter into it, but, before I embark on those, am I missing a simple way to do it, either using Rangy or normal JS?
Thanks!

Here's the code I ended up with, which worked perfectly in IE11 but has not been tested in other browsers yet:
var actual_textarea = document.getElementById("my_input_textarea");
actual_textarea.focus();
var selectedInstance = this.ne.selectedInstance;
var range = selection.getRangeAt(0);
range.deleteContents();
var new_div = document.createElement("div");
new_div.innerHTML = "<div class='" + this.rangyClassPrefix + elm + "'></div>";
var frag = document.createDocumentFragment();
var node, lastNode;
while (node = new_div.firstChild)
{
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode)
{
range = range.cloneRange();
range.selectNodeContents(lastNode);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
Notice that I set focus first since the style is being applied by focus-changing clicks on other elements.
I'm still a little fuzzy at the thought of range clones being value rather than reference clones but still working perfectly when added, since that's counterintuitive, but it does work.
Thanks!

Setting selection to edge of node makes WebKit report inconsistent range

Assume the following DOM tree:
<div id="edit" contenteditable="true">
this content <a id="link" href="http://www.google.com/">contains</a> a link
</div>
Then create a range right after the anchor:
var r = document.createRange();
var link = document.getElementById('link');
r.setStartAfter(link);
r.setEndAfter(link);
As expected, its commonAncestorContainer is the element with id edit:
console.log(r.commonAncestorContainer); /* => <div id="edit" contenteditable="true">…</div> */
Set the selection to this range:
var s = window.getSelection();
s.removeAllRanges();
s.addRange(r);
Now query the window for the current selection range and check its commonAncestorContainer:
var r2 = s.getRangeAt(0);
console.log(r2.commonAncestorContainer);
You will find that in Firefox the result is as expected; the same element with id edit.
In WebKit browsers though, the selection range ancestor container suddenly is the text node inside the anchor; "contains", yet when you start typing you will find that you really are not inside the anchor. WTF!?
Click here for a live demo.
Is there any potential rationale behind this behavior? Any reason to assume that it is not a WebKit bug??
Thanks for your $.02.

WebKit only allows certain positions within the DOM to be used as selection boundaries or caret positions. It therefore modifies a range that is selected using the selection's addRange() method to conform to this. See also https://stackoverflow.com/a/14104166/96100.
There is another issue at play, which is that WebKit has a special case for a caret position at the end of a link which places text typed at that position after the link rather than inside it. This is undeniably a bit of a nasty hack, given that the browser reports the selection as being inside the link. However, this does not happen for other inline elements, as you can see this in this modified version of your demo:
http://jsbin.com/EYoWuWe/7/edit

Javascript get range compared to a parent element

I have a function that return an array (won't work in IE) with two elements
the html code of what the user select inside a div (id=text)
the range of the selection
In case the user select a simple string inside the text div the range return the correct values but when the user select a string inside an element child of div (div#text->p for example) range's values are related to the child element but i want them to be related to the parent (div#text)
Here there's a JsFiddle http://jsfiddle.net/paglia_s/XKjr5/: if you select a string of normal text or normal text + bolded text in the teatarea you'll get the right selection while if you select the bolded word ("am") you'll get the wrong one because the range is related to the child element.
There's a way to do so that the range is always related to div#text?

You could use my Rangy library and its new TextRange module, which provides methods of Range and selection to convert to and from character offsets within the visible text of a container element. For example:
var container = document.getElementById("text");
var sel = rangy.getSelection();
if (sel.rangeCount > 0) {
var range = sel.getRangeAt(0);
var rangeOffsets = range.toCharacterRange(container);
}
rangeOffsets has properties start and end relative to the visible text inside container. The visible text isn't necessarily the same as what jQuery's text() method returns, so you'll need to use Rangy's innerText() implementation. Example:
http://jsfiddle.net/timdown/KGMnq/5/
Alternatively, if you don't want to use Rangy, you could adapt functions I've posted on Stack Overflow before. However, these rely on DOM Range and Selection APIs so won't work on IE < 9.

If you don't want to use a library here is a way which worked for me.
The function returns the cursor offset relative to the textContent of the given node (not in relation to the sub nodes).
Note: The current cursor position must lie in the given node or in any of its sub-nodes.
It's not cross-browser compatible (specially not for IE), but I think it's not much work to fix that as well:
function getCursorPositionInTextOf(element) {
var range = document.createRange(),
curRange = window.getSelection().getRangeAt(0);
range.setStart(element, 0);
range.setEnd(curRange.startContainer, curRange.startOffset);
//Measure the length of the text from the start of the given element to the start of the current range (position of the cursor)
return document.createElement("div").appendChild(range.cloneContents()).textContent.length;
}