Javascript 收听contenteditable上的特定更改？

警告：现有问题不能重复，请通读

我知道我可以有一个事件监听

contenteditable

元素上的更改

我想知道的是变化是什么

例如：

• 在位置X插入“这是一个句子”
• 从位置X到Y删除
• 使用

可能吗？（我的意思是，除了做一个diff之外，）

---

这样做的原因是为了使所见即所得编辑器使用HTML以外的其他语言，例如Markdown

---

因此，我想将这些更改应用于标记源（而不是从HTML转换为标记）。

您在找这个吗

var strong=document.createElement("strong");
var range=window.getSelection().toString().getRangeAt(0);
range.surroundContents(strong);

这是第三部分

您只需要使用真实的用户交互来选择要围绕的内容

如果你想动态地做

var range=document.createRange();
range.setStart(parentNode[textNode],index to start[X])
range.setEnd(parentNode[textNode],index to end[Y])
range.surroundContents(strong);

第二部分

range.deleteContents()

第一部分可以通过使用简单的迭代来完成

var textnode=//正在使用的元素的节点

textnode.splitText(offset)

偏移量-发生文本节点拆分的位置[此处==X] 已为父可编辑元素创建了两个子节点

现在在父可编辑元素节点上使用simple insertBefore（）

---

希望您会发现它很有用

对不起，如果不在原始内容和修改内容之间进行区分，就无法确定更改内容。

您要查找的API不存在，因为DOM节点不存储其以前的状态

您希望返回的数据/事件在我遇到的任何浏览器中都不是本机实现，我很难想出一种能够处理所有这些情况的数据类型。也许是这样的：

function getChanges() {

    /* do stuff here to analyse changes */

    var change = {
        changeType : 'contentAdded',
        changeStart : 50, /* beginning character */
        changeContent : 'This is a sentence'
    }

    return change;
}

---

由于您试图获取自定义事件/数据，因此可能需要自定义模块或微库。不管是哪种方式，为了观察事物的变化，你需要以某种方式意识到发生了什么变化，这只能通过比较过去和现在来实现。

你也许可以用s做一些事情（在较旧的浏览器中回到D，虽然IE可以用过多的代码来完成，但这肯定有助于澄清一个真实的例子，说明某人会做什么，如果他们这样做，你想做什么，以及最重要的原因。@John我给出了一个真实的例子：它是Markdown的WYSIWYG编辑器。WYSIWYG代表Markdown？我曾经尝试过实现HTML->MD转换器（已经有了一个很棒的解析器，我只需要一个MD编写器），结果证明这是一个毫无意义的项目，因为MD太差了。你永远无法将所见即所得（HTML模式）与源模式（MD输出）同步对于专业项目来说已经足够了。请给出实际合理的解释，说明为什么diff是不可接受的解决方案。这就像是问如何将两个数字相加（我指的是使用加法运算符除外）。FML。@crl:这两种方法对我都适用。也许你编辑错了？我承认示例不太清楚。啊，是的

[contenteditable]{border:1px solid；}

有助于找出要编辑的内容，将其与MutationObserver et voilá结合使用）