Курсор продолжает двигаться к началу

Question

На моей странице, когда пользователь нажимает на указанный div, редактор wysiwyg инициализируется этим div. И это прекрасно работает. Но проблема в том, что курсор продолжает позиционирование в начале строки. Даже если я выбираю слово, курсор позиционирует себя к началу строки, которая затем отменяет выбор выбранного слова. Как я могу убедиться, что курсор находится в том месте, где пользователь хочет или щелкает?

Образец в 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

Это проблема с логикой кода JavaScript. Сейчас это то, что JS делает при нажатии на одну из .redactor дивы:

1. Уничтожить редактор редактор для .selected классов.
2. Добавьте класс .selected в щелчок.
3. Инициализировать редактор редактора для щелчка.

Это отлично работает, если вы нажмете на поле, отличное от выбранного, но если вы нажмете на выбранный флажок, вы уничтожите редактор редактора, а затем снова инициализируете. И именно это заставляет курсор-карет идти к началу с каждым щелчком.

Одно быстрое решение было бы обернуть все функции в состоянии, поэтому она применяется только если div нажал не выбран один уже:

• Если это поле уже не .selected:
  1. Уничтожьте редактор редактора для классов .selected.
  2. Добавьте класс .selected в щелчок.
  3. Инициализировать редактор редактора для щелчка.

---

Вы можете увидеть здесь работать (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>