图像上的 contenteditable removeFormat答案

【问题标题】：contenteditable removeFormat on images图像上的 contenteditable removeFormat
【发布时间】：2013-04-24 17:52:59
【问题描述】：

我正在尝试将 contenteditable DIV 与作为表单一部分的 textarea 同步。

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

我可以使用：

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

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

（我还需要在图像上使用 ALT 标记，而 execCommand / insertImage 似乎无法完成。这是正确的吗？我最终遵循了 Contenteditable text editor and cursor position 的建议并使用了 insertHTML）

非常感谢！

【问题讨论】：

什么样的图像格式？为什么不走 DOM 来删除格式？

标签： javascript html contenteditable

【解决方案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];
    }
}

【讨论】：