Question

我有一个所见即所得的页面编辑器，用户可以在页面中添加现成的块和其他内容（在iframe内部）并拖动它们。目前，他们可以点击“修改文字”按钮来更改元素的内容（h - 代码，p - 代码，a - 代码），但我们希望这样做使用contenteditable属性的功能。

Iframe（模板）中的页面是从同一个域加载的。鼠标悬停时contenteditable属性设置为true，鼠标左侧设置为false（除非用户将其关注，否则模糊将禁用contenteditable）。（这有效）

现在我想添加触发execCommand()的按钮。我的eventlistener在点击时触发，选择仍然在可编辑元素中，但没有任何改变。

$('.page-builder-viewport').on('load', function() {
    var viewport = $(this).contents(), // The Iframe
    doc = $('#viewport_en').get(0).contentWindow || $('#viewport_en').get(0).contentDocument;
    // $('#viewport_en').get(0) was $(this)[0] first, but did not make difference.
    if(doc.document) {
        doc = doc.document;
    }

    ..[Deleted wall of code]..

    // This is how I try to trigger `execCommand()`
    viewport.on("click", ".btn-text-underline", function (e) {

        console.log(doc); // To be sure target is correct
        doc.execCommand('underline',false,null);
        e.preventDefault();
        return false;
    });
});

console.log()打印Iframe文档。我错过了什么吗？

可能是因为我在页面上有多个Iframe？

exec命令iframe中的元素

0 个答案: