Cursor keeps moving to the begining

Question

In my page, whenever a user clicks on a specified div, the wysiwyg editor is initialized with that div. And that works fine. But, the problem is that the cursor keeps positioning at the beginning of the line. Even if I select word, the cursor positions itself to the beginning of the line which then unselects the selected word. How do I make sure the cursor is at the position where the user wants or clicks?

Sample in codepen.io.

<div id="toolbar_wrapper">
  <div id="toolbar">
  </div>
</div>

<div id="content">
  <div class="redactor">
    <h1>Header</h1>
    <p>Paragraph</p>
  </div>

  <div class="redactor">
    <h1>Another Header</h1>
    <p>Another Paragraph</p>
  </div>
</div>

Answer 1

This is an issue with the logic in the JavaScript code. Right now this is what the JS does when you click on one of the .redactor divs:

1. Destroy the redactor editor for the .selected classes.
2. Add the class .selected to the clicked box.
3. Initialize the redactor editor for the clicked box.

That works great if you click on a box different to the one already selected, but if you click on the selected box, you are destroying the redactor editor, and then initializing again. And this is what causes the cursor caret to go to the beginning with each click.

One quick solution would be to wrap the whole function in a condition, so it is only applied if the div clicked is not the selected one already:

• If this box is not already .selected:
  1. Destroy the redactor editor for the .selected classes.
  2. Add the class .selected to the clicked box.
  3. Initialize the redactor editor for the clicked box.

---

You can see it working here (or on this JSFiddle):

$(document).ready(function () {

    var current_edit;

    function destroy_redactor(param) {
        console.log("destroy");
        $(param).redactor('core.destroy');
    }

    function initialize_redactor(param) {
        console.log("init");
        $(param).redactor({
            focus: true,
            toolbarExternal: '#toolbar'
        });
    }

    $('.redactor').on("click", function() {
      
        if (!$(this).hasClass("selected")) {
          
            $(".redactor").each(function () {
                if($(this).hasClass("selected")) {
                    destroy_redactor(current_edit);
                    $(this).removeClass("selected");
                }
             });

        
            $(this).addClass("selected");
            current_edit = $(this);
            initialize_redactor(current_edit);
        }
    });

});   

#content {
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid lightgray;
}

.redactor {
    border: 1px solid lightgreen;
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//imperavi.com/js/redactor/redactor.css">
<script type="text/javascript" src="//imperavi.com/js/redactor/redactor.js"></script>
<div id="toolbar_wrapper">
    <div id="toolbar">
    </div>
</div>

<div id="content">
    <div class="redactor">
        <h1>Header</h1>
        <p>Paragraph</p>
    </div>

    <div class="redactor">
        <h1>Another Header</h1>
        <p>Another Paragraph</p>
    </div>
</div>