6

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

我知道我可以让一个事件监听contenteditable元素的变化。

我想要的是能够知道这些变化是什么。

例如：

  • 插入“这是一个句子。” 在位置 X。
  • 从位置 X 到 Y 删除。
  • 从 X 到 Y 格式化为<strong>

那可能吗？（除了我的意思是做一个差异）

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

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

4

4 回答 4

4

您可能可以使用MutationObservers 做一些事情（回退到旧浏览器中的DOM Mutation 事件，尽管 IE <= 8 都不支持），但我怀疑实现您想要的仍然是一项艰巨的工作。

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

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

于 2013-08-16T08:22:33.713 回答
2

抱歉，如果更改发生时不对原始内容和修改后的内容进行比较，就无法找出更改的内容。

于 2013-08-09T15:18:50.207 回答
1

你在找这个吗

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)

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

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

希望你会发现它有用

于 2013-08-04T18:45:44.563 回答
-2

您要查找的 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;
}

由于您正在尝试获取自定义事件/数据，因此您可能需要一个自定义模块或微库。无论哪种方式，要查看某物的变化，您都需要以某种方式了解发生了什么变化，这只能通过将其与现在进行比较来完成。

于 2013-08-16T03:02:45.167 回答