We Keep Coding

insertHTML to insert Div in contentEditable div does not make it draggable or resizeable

The crux of the issue is that I have a contentEditable div. I execute the following JS:
document.execCommand('enableAbsolutePositionEditor', false, null);
document.execCommand('enableObjectResizing', false, null);
document.execCommand('insertHTML', false, "<div class='inner1' style='position:absolute;left:100px;right:100px;'>innerDiv</div>");
Goal is to enable entry of some div inside and make it moveable and resizeable. This is the basic to start. I would then like to make that div itself contentEditable, if possible so that blocks of text can be moved around or resized (using the first two commands). I also want to do so in such a way that the contentEditable's undo/redo button has control over it.
The div gets inserted but it is neither draggable nor resizeable. There are other issues (edit inside overwrites and does not move existing content) but I need to get around the basic two objectives first. Do I need to install some jQuery plugin for this?

tinymce trims last space

I am writing a module that change content. I use tinymce & i get all content using
var txt = editor.getContent({format: 'text'});
when i do my fixes, i get content via AJAX & put my content using
editor.setContent(results.text);
setContent erases all previous text & put new one but it puts cursor at the start of the line so i used smthg like this:
editor.selection.select(editor.getBody(), true);
editor.selection.collapse(false);
I need to add one space after setContent(results.text) .I need to put cursor after space, but it(tinymce) trims last space & put cursor at last symbol.
Can U advertise me what to do?

Contenteditable div: save and restore caret position when is positioned in empty new line

I need to save and restore the caret position as the user types in a contenteditable div (the html written is edited and re-inserted with each key pressed).
I've read and succesfully used this solution by Tim Down to a similar question: https://stackoverflow.com/a/13950376/2086428.
The problem occurs when the caret is positioned in an empty line, it will be restored to the previous non-empty line (try it here, add a new line and save / restore the cursor).
In the comments section of the solution proposed one user had the same problem, the author of the solution hinted to convert the <br>s into characters.
How can I do this?
Are there any simpler solutions?
PS: I can't use rangy for this project.

From this answer:
The solution is to make sure, that every "br" tag is followed by a newline character (\n).
This won't hurt the HTML content in any visible way, but now all HTML breaks are translated to plain text line breaks as soon as range.toString() is being called.
<br>\n
Working example here: http://jsfiddle.net/gEhjZ/95/
For comparison, example, which has problem (without \n after "br"): http://jsfiddle.net/gEhjZ/94/

You can listen to keydown; every time Enter key is pressed check if there are some character(s) in the same (or next sibling) text node immediately after caret position (you will receive event before the line is broken). If not add after caret position and then save the position.
Some of these utilities can be useful:
https://github.com/MailOnline/milo/blob/master/lib/util/dom.js
https://github.com/MailOnline/milo/blob/master/lib/util/selection/index.js

Javascript - insert image tag at the position of the cursor in the textarea

I know there are a few posts with the similar title, but they don't seem to refer to the same question.
I'm trying to put the image tag at the position of the cursor inside of the specific textarea from withing the popup instantiated by the button from the same page as the textearea.
At the moment I simply append the image tag to the end of the content in textarea like so:
window.opener.document.getElementById('textarea_id').value += '<img .... />';
I've found one post here: How To insert an image at cursor position in tinymce, but obviously this one refers to the tinymce, which has some built in functions available.
Any thoughts?

You could use selectionStart read more about it at: https://developer.mozilla.org/en-US/docs/DOM/HTMLTextAreaElement
window.opener.document.getElementById('textarea_id').selectionStart
Also see Caret position in textarea, in characters from the start

Selection object behaving strange in Chrome contentEditable element

I'm working on a realtime syntax highlighter in javascript using contenteditable. When parsing content I extract the text of the div and use regex patterns to style it properly. Then I set the innerHtml of the div to the parsed content. However, this makes the cursor disappear from the screen.
I have created this function to reset the cursor, and it works fine in Firefox. But in Chrome the cursor is moving in a wierd way that is semi-predictable. It's usually set at the first space-char in the document instead of the place it was right before the parsing.
The caret char that is stored in the variable cc is at the place it should be though.
/**
* Put cursor back to its original position after every parsing, and
* insert whitespace to match indentation level of the line above this one.
*/
findString : function()
{
cc = '\u2009'; // carret char
if ( self.find(cc) )
{
var selection = window.getSelection();
var range = selection.getRangeAt(0);
if ( this.do_indent && this.indent_level.length > 0 )
{
var newTextNode = document.createTextNode(this.indent_level);
range.insertNode(newTextNode);
range.setStartAfter(newTextNode);
this.do_indent = false;
}
selection.removeAllRanges();
selection.addRange(range);
}
}
Some facts about calling these functions:
When I uncomment the code that switches the innerHtml content the cursor usually moves to the end of the document instead.
If I uncomment the findString() caller the parsing is done but the cursor disappears until I put focus back in the div.
If I uncomment both lines the div is behaving as one would expect except, ofcourse, for the parsing.
What is causing this misbehaviour in Chrome while it works in Firefox?
EDIT: More information
I was doing some logging on window.getSelection() and noticed that it contained different information when comparing Chrome and Firefox. Which made the script behave just as it should, but with an argument that's wrong.
The really wierd thing is that when I log window.getSelection() as the very first action of the keyhandler script it behaves like this:
Without any modification I get the "wrong" object.
With a breakpoint set right under the console.log() directive, the script pauses and the log shows a "correct" object, just the way I want it.
The logger:
console.log(window.getSelection());
// Do keyhandling stuff...

Try to make a copy of the original range and add it to the selection rather than the original range at the end of the function, since the range can have dynamic boundaries, and you will end up setting back a "wrong" one.