游標不斷前進

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>