0

我一直在盯着这个问题一段时间，并没有设法得到一个有效的解决方案。

我正在使用Rangy库来确保对Ranges的最佳支持。

目标

  1. 进行选择并使用链接换行。即使选择在链接内。
  2. 对已链接的选择进行完整选择并将其替换为链接。

例子

我希望转换以下内容，其中|是一个选择范围。

  链接到 |添加链接| 至

<a href="http://example.com">link to |add a link| to</a>

预期的

  链接到| 添加链接| 至

<a href="http://example.com">link to</a> |<a href="http://example.com/pre">add a link</a>| <a href="http://example.com">to</a>

测试期望 Plnkr

我感谢你的帮助。

更新（2013-05-15 21:37 UTC）：

我有以下

range = document.getSelection();
link = document.createElement('a');
link.href = "http://example.com/new";
range.surroundContents(link);

我还更新了plnkr 测试

4

1 回答 1

0

我设法找到了一个支持所有 3 个场景的解决方案。

rangy.createModule('SafeWrapLink', function(api, module) {
  var surroundSelectionWithLink;
  surroundSelectionWithLink = (function(href) {
    var after, afterLink, afterLinkHref, before, beforeLink, beforeLinkHref, currentLink, fullText, link, par, parNode, range, selectionText;
    range = document.getSelection().getRangeAt(0);
    selectionText = range.toString();
    if (range.commonAncestorContainer.nodeName !== "#text") {
      beforeLinkHref = range.commonAncestorContainer.childNodes[0].getAttribute('href');
      afterLinkHref = range.commonAncestorContainer.childNodes[2].getAttribute('href');
      par = range.commonAncestorContainer;
      parNode = par;
    } else {
      par = range.commonAncestorContainer.parentNode;
      currentLink = par.getAttribute('href');
      parNode = par.parentNode;
    }
    fullText = par.innerText;
    before = fullText.match(new RegExp("^(.*)" + selectionText))[1];
    after = fullText.match(new RegExp(selectionText + "(.*)$"))[1];

    // Build link for before selection
    beforeLink = document.createElement('a');
    beforeLink.href = beforeLinkHref || currentLink;
    beforeLink.innerText = before;

    // Build link to insert
    link = document.createElement('a');
    link.href = href;
    link.innerText = selectionText;

    // Build link for after selection
    afterLink = document.createElement('a');
    afterLink.href = afterLinkHref || currentLink;
    afterLink.innerText = after;

    // Append the links in order
    if (beforeLink.innerText.length > 0) {
      parNode.appendChild(beforeLink);
    }
    parNode.appendChild(link);
    if (afterLink.innerText.length > 0) {
      parNode.appendChild(afterLink);
    }

    // remove old linking
    if (par === range.commonAncestorContainer) {
      par.removeChild(par.childNodes[0]);
      return par.removeChild(par.childNodes[1]);
    } else {
      return parNode.removeChild(par);
    }
  });
  return api.util.extend(api, {
    surroundSelectionWithLink: surroundSelectionWithLink
  });
});

然后在进行选择后调用以下

rangy.surroundSelectionWithLink('http://www.example.com/added');

在 plnkr.co 上查看测试和实时代码

于 2013-05-20T11:26:01.003 回答