javascript - 图像上的 contenteditable removeFormat

Question

我正在尝试将一个 contenteditable DIV 与作为表单一部分的文本区域同步。

我正在从 DIV 中提取 innerHTML，但我希望能够从 img 标签(粗体、斜体、下划线等)中删除嵌套格式。在访问 div 的 innerHTML 之前删除图像上的任何格式可能比在 html 上使用正则表达式更容易。

我可以使用:

    document.execCommand('removeFormat', false, null); 

但是我怎样才能只删除图像上的格式？

(我还需要在图像上使用 ALT 标签，使用 execCommand/insertImage 似乎不可能完成。这是正确的吗？我最终遵循了建议Contenteditable text editor and cursor position 并且正在使用 insertHTML)

非常感谢!

Answer 1

按照@tim-down 的建议，我尝试导航 DOM 并从 IMG 标签中删除文本格式。

奖金将颁发给更优雅的解决方案。

这里的工作示例:http://jsfiddle.net/tjzGg/

function setCaret() {
    var el = document.getElementById("editable");
    recurseDOM(el);
    el.focus();
}

function recurseDOM(el) {
    var nIndex = 0;
    var elNode = el.childNodes[nIndex];
    while (elNode) {
        var tag = elNode.tagName;
        if (tag) {
            if (tag.toUpperCase() == 'IMG') {
                var range = document.createRange();
                var sel = window.getSelection();
                range.selectNode(elNode);
                sel.removeAllRanges();
                sel.addRange(range);
                document.execCommand('removeFormat', false, null);
            } else if (elNode.childElementCount) {
                recurseDOM(elNode);
            }
        }
        nIndex++;
        elNode = el.childNodes[nIndex];
    }
}