Question

我需要在用户点击后拆分元素，并且attr'contenteditable'变为'true'。 This小提琴适用于第一段，但不适用于第二段，因为后者属于p标签。类似于this小提琴，你会看到当元素中有html标签时，计数器会失去准确性，因此光标前后的文字不是你所期望的。

此处的假设是用户将以帮助标记保持不变的方式拆分数据。正如dandavis在这里指出的，例如div为Hello Wo*rld，用户只需要将div拆分为两个div，第一个将有Hello，第二个div将包含Wo*rld。

HTML：

<div><mark>{DATE}</mark><i>via email: </i><mark><i>{EMAIL- BROKER OR TENANT}</i></mark></div>

JS：

var $splitbut = $('<p class="split-but">Split</p>');
$(this).attr('contenteditable', 'true').addClass('editing').append($splitbut);

var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
var start = userSelection.anchorOffset;
var end = userSelection.focusOffset;

var before = $(this).html().substr(0, start);
var after = $(this).html().substr(start, $(this).html().length);

“分割”按钮不起作用，因为一旦我得到正确的“之后”和“之前”文本，生成html不是问题。关于我在这里做错了什么想法？

Answer 1

这样的事情可能适用于您描述的具体案例

$('div, textarea').on('click', function(e) {
 var userSelection;
    if (window.getSelection) {
        userSelection = window.getSelection();
    }
    var start = userSelection.anchorOffset,
        end = userSelection.focusOffset,
        node = userSelection.anchorNode,
        allText = $(this).text(),
        nodeText = $(node).text();

// before and after inside node
  var nodeBefore = nodeText.substr(0, start);
  var nodeAfter = nodeText.substr(start, nodeText.length);

// before and after for whole of text
    var allExceptNode = allText.split(nodeText),
        before = allExceptNode[0] + nodeBefore,
        after = nodeAfter + allExceptNode[1];

  console.log('Before: ', before);
  console.log('------');
  console.log('After: ', after);

});

在https://jsfiddle.net/gaby/vaLz55fv/10/

更新了演示

如果有标签的内容在整个文本中重复，则可能会出现问题。（由于分裂造成的问题）

在光标位置拆分div内容

1 个答案: