People seem to love to answer this question everywhere online while ignoring the CONTENTEDITABLE div requirement. Using code that seems to only work on input fields or textareas and not divs.
Additionally, most questions people have wanted to put the cursor caret INSIDE the newly inserted HTML... which is weird, because it does it automatically for me. I want to keep the cursor OUTSIDE (to the right) of the newly inserted HTML. Why?
Tabs. the CONTENTEDITABLE div needs to have a 'white-space:normal' so that way all text-align: left | center | justify | right format properly. But in order to maintain the true nature of tabs the white-space has to be set to 'pre-wrap'. Unfortunately, text-align:justify does not work when white-space is set to pre-wrap. My solution? Have the CONTENTEDITABLE div have a white-space:normal and then insert a SPAN tag with a tab and the style set to 'pre-wrap'. That way the div can still align text however it is needed without loosing the proper tabbing.
BUT whenever I hit tab (inserting the span tag) and continue typing... all the text gets put INSIDE the span tag, ruining what I was trying to accomplish. document.execCommand("inserthtml",false," ");
BUT if I do document.execCommand("inserthtml",false," ."); and continue typing then the text follows the "." and is outside the span tag - what I desire. However... then I have a stupid "." that doesn't belong.
So how do I either... 1. insertHTML BEFORE the cursor thus leaving the caret OUTSIDE the inserted tag. or 2. simulate the backspace key and delete the previous character
strictly inside a CONTENTEDITABLE DIV. Please no answers on how to do it with textareas and inputs, they don't work on contenteditable divs. The world has plenty of answers for those. I just want one for contenteditable divs.
Thanks. :)