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代码中的逻辑问题。现在，当你点击其中一个.redactor div：

时，这就是JS所做的

销毁.selected类的编辑器编辑器。
将班级.selected添加到点击的框中。
初始化所单击框的编辑器编辑器。

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

一个快速的解决方案是将整个函数包装在一个条件中，因此仅当单击的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>

光标一直在移动到开始

1 个答案: