光标一直向开头移动

Question

在我的页面中，每当用户单击指定的 div 时，所见即所得编辑器都会使用该 div 进行初始化。这很好用。但是，问题是光标一直定位在行的开头。即使我 select 单词，光标也会将其自身定位到行的开头，然后取消 selects selected 单词。如何确保光标位于用户想要或点击的位置？

样本在 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 所做的事情：

销毁 .selected classes 的 redactor 编辑器。
将 class .selected 添加到点击框。
为点击框初始化编校编辑器。

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

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

如果这个框还没有.selected：
1. 销毁 .selected classes 的 redactor 编辑器。
2. 将 class .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>

光标一直向开头移动

Cursor keeps moving to the begining

javascript

jquery

html

wysiwyg