Question

警告：与现有问题不重复，请仔细阅读

我知道我可以通过事件监听contenteditable元素的更改。

我希望能够知道更改的内容。

例如：

插入“这是一个句子。”在X位置。
从位置X删除为Y。
使用<strong>

这可能吗？（除了做差异，我的意思是）

原因是制作除HTML以外的其他语言的WYSIWYG编辑器，例如Markdown。

所以我想将更改应用到Markdown源代码（而不是从HTML转到Markdown）。

Answer 1

您可以使用MutationObserver做一些事情（在旧浏览器中回退到D OM Mutation events，虽然IE＆lt; = 8不支持）但我怀疑它仍然很难实现你想要的。

这是一个使用MutationObservers的简单示例：

http://jsfiddle.net/timdown/4n2Gz/

Answer 2

很抱歉，但是如果没有在原始内容和修改过的内容之间进行差异，就无法找出更改的内容。

Answer 3

你在找这个吗？

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)

偏移 - 关于发生哪个文本节点拆分的位置[here == X] 已创建父可编辑元素

的两个子节点

现在在父可编辑元素节点上使用简单的insertBefore（）。

希望你会发现它很有用

Answer 4

您正在寻找的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;
}

由于您正在尝试获取自定义事件/数据，因此您可能需要自定义模块或微型库。无论哪种方式，要查看某些内容的更改，您需要知道已更改的内容，这只能通过比较它现在的内容来完成

听取contenteditable的具体变化？

4 个答案: