如何在 contenteditable 元素中用 html 替换选定的文本?

IT技术 javascript jquery contenteditable
2021-01-14 18:41:37

使用 contenteditable 元素如何用我自己的 html 替换所选内容?

2个回答

在这里查看工作 jsFiddle:http : //jsfiddle.net/dKaJ3/2/

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    alert(html);
}

取自Tim Down 的代码从用户选择的文本中返回 HTML

顺便说一句-永远不要调用该函数getSelection(),因为这将覆盖默认值并导致堆栈递归
2021-03-18 18:41:37
没关系,找到了答案:stackoverflow.com/questions/3997659/...
2021-04-02 18:41:37
它没有解决问题:如果至少有两个相似的字符串,您将如何替换选择?
2021-04-02 18:41:37
效果很好!谢谢。我现在如何将所选文本替换为与文本位置相同的其他内容?
2021-04-11 18:41:37
很好,但请再问一个问题,它从整个文档中返回选定的文本,如何只获取选定的 div。可能是一个具有不同类的 div?
2021-04-12 18:41:37

要获取选定的 HTML,您可以使用我为此问题编写的函数要将选择替换为您自己的 HTML,您可以使用此功能这是插入 HTML 字符串而不是 DOM 节点的 replacer 函数的一个版本:

function replaceSelectionWithHtml(html) {
    var range;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.deleteContents();
        var div = document.createElement("div");
        div.innerHTML = html;
        var frag = document.createDocumentFragment(), child;
        while ( (child = div.firstChild) ) {
            frag.appendChild(child);
        }
        range.insertNode(frag);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.pasteHTML(html);
    }
}

replaceSelectionWithHtml("<b>REPLACEMENT HTML</b>");
为什么“html”既是函数的参数又是局部变量声明?它之所以有效是因为stackoverflow.com/a/27963351/578812但乍一看似乎令人困惑。
2021-03-13 18:41:37
@flen:varJavaScript 中语句允许您在单个语句中声明多个变量,用逗号分隔,每个变量可选地具有初始值。更多信息请访问 MDN
2021-03-21 18:41:37
请定义node我想我们可以删除这一行html = (node.nodeType == 3) ? node.data : node.outerHTML;
2021-04-02 18:41:37
@CraigA:这是一个错误。我怀疑我复制并改编了一个没有html参数的函数。谢谢你指出。
2021-04-02 18:41:37
@HDog:是的,你说得对。看起来像我忘记删除的复制粘贴行。我现在已经删除了。谢谢。
2021-04-05 18:41:37