2

我很难做一些应该简单的事情：获取用户在段落中单击的插入符号位置。这很复杂，因为我正在根据用户输入创建和销毁 WYSIWYG 文本编辑器Redactor的实例，这会修改 DOM。

我的结构：

<div class='node'>
    <div class='hierarchy'></div>
    <div class='content'>
        <h2>Test Heading</h2>
        <p>Content that user might click on.  Need to find position where I should insert cursor after initialising Redactor</p>
    </div>
</div>

当用户点击文本时，我正在初始化一个 redactor 的实例，它会像这样修改 DOM：

<div class='node'>
    <div class="hierarchy"></div>
    <div class="redactor_box">
        <div id="redactorToolbar">... ul etc ...</div>
        <div class="content redactor_editor" contenteditable="true">
            <h2>Test Heading</h2>
            <p>Content that user might click on.  Need to find position where I should insert cursor after initialising Redactor</p>
        </div>
        <textarea dir="ltr" style="height: 90px; display: none;"></textarea>
    </div>
</div>

初始化编辑器后，我想将光标定位在用户最初单击的位置。很简单，对吧？好吧，在我的点击处理程序（附加到 div.node）中，在window.getSelection()点击之前返回插入符号的位置：

Node.prototype.onClick = function (e, ui) {
    var $el = $(this),
        node = $el.data('node'),
        document = node.document,
        selection = window.getSelection();

    console.log('rangeCount: ', selection.rangeCount);
    console.log('type: ', selection.type);
    console.log('anchorOffset: ', selection.anchorOffset);

    if ($el.has('.redactor_box').length <= 0) {
        document.setRedactor(node);
    }
};

比如说我：

  1. 点击<p>char 5
    • 打印“rangeCount：0，类型：无，anchorOffset：0”
    • 初始化 Redactor，包装内容DIV并制作它contenteditable='true'
  2. <p>在at char 位置 108 内单击
    • 打印“rangeCount: 1, type: Caret, anchorOffset: 108”（预期）
  3. <p>单击字符 5 处 的不同节点
    • 打印“rangeCount：1，类型：插入符号，anchorOffset：108”（未预期）
    • 销毁编辑器并在第二个节点周围重新创建

在第 1 步和第 3 步中，“选择”显然没有传递给<p>. 我认为这是因为在这些点上，所<p>讨论的问题在其祖先中没有任何contenteditable='true'血统，因此它本身不能真正具有“选择”。

我的问题：

当用户单击一个非内容可编辑<p>标签时，如何在鼠标光标下获取插入符号位置？

非常感谢任何帮助/建议！

（不幸的是，Redactor 不是免费提供的，所以我不能将它包含在 jsFiddle 示例中）

更新

这些“节点” div 也使用 jQueryUI 的可拖放小部件。禁用这些后，处理程序输出选择的预期值......有趣。不幸的是，拖放功能是必需的..

4

1 回答 1

0

我不知道这是否可行，但setTimeout在获得选择之前尝试添加一个小的。这应该会导致它在单击后为您提供选择，然后在该回调中您可以初始化编辑器。

于 2014-03-04T23:55:04.797 回答