JSFiddle - React, Tailwind, and code Playground

by kidmeke

HTML

<html>
    <body>
        <div id="divContent" contentEditable="true">
            <div style="background-color:orange; width: 50%; margin-top:10px;">
                testing!
            </div>
        </div>
    </body>
</html>

CSS

#divContent
            {
                border: solid 2px green;
                height: 500px;
                width: 500px;
            }

JavaScript

$(document).ready(function()
            {
                $("#divContent").bind('click', function()
                {
                    GetCursorPosition();
                });
                $("#divContent").bind('keydown', function()
                {
                    GetCursorPosition();
                });
            });
            
            function GetCursorPosition()
            {
                if (window.getSelection)
                {
                    var selObj = window.getSelection();
                    var selRange = selObj.getRangeAt(0);
                    cursorPos = findNode(selObj.anchorNode.parentNode.childNodes, selObj.anchorNode) + selObj.anchorOffset;
                    $('#htmlRadEdit_contentDiv').focus();
                    selObj.addRange(selRange);
                }
                else if (document.selection)
                {
                    var range = document.selection.createRange();
                    var bookmark = range.getBookmark();
                    // FIXME the following works wrong when the document is longer than 65535 chars 
                    cursorPos = bookmark.charCodeAt(2) - 11; // Undocumented function [3] 
                    $('#htmlRadEdit_contentDiv').focus();
                    range.moveStart('textedit');
                    range.collapse();
                    range.pasteHTML('tst:' + cursorPos + '');
                }

            }

            function SetCursorPosition(node, pos)
            {
                var sel, range;
                var div = document.getElementById('htmlRadEdit_contentDiv');
                if (window.getSelection && document.createRange)
                {
                    range = document.createRange();
                    range.selectNodeContents(div);
                    range.collapse(true);
                    
                    range.setStart(div, pos);
                    range.setEnd(div, pos);
                    
                    sel...