游标不断前进

Question

在我的页面中，每当用户单击指定的div时，就使用该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代码中的逻辑问题。 现在，这是当您单击.redactor div之一时JS所做的工作：

1. 销毁.selected类的编辑器编辑器。
2. 将class .selected添加到单击的框中。
3. 初始化单击框的编辑器编辑器。

如果您单击与已选择的框不同的框，则效果很好，但如果单击所选的框，则将销毁编校器编辑器，然后再次初始化。 这就是导致光标插入符号在每次单击时都开始的原因。

一种快速的解决方案是将整个函数包装在一个条件中，因此仅当单击的div尚未选定时才应用它：

• 如果尚未.selected此框：
  1. 销毁.selected类的编辑器编辑器。
  2. 将class .selected添加到单击的框中。
  3. 初始化单击框的编辑器编辑器。

---

您可以在这里（ 或在此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>