Question

在对我的上一个问题提出有用评论之后： Copy & Paste plain text within HTML

我现在正在努力将此方法应用于富文本编辑器（RTE）。我的应用程序在CMS环境中运行，在这种情况下为CQ5.6.1，但这与问题无关。通过双击在该系统中编辑文本块，这将打开一个所谓的对话框，在第一个选项卡中，RTE将加载到iframe中。因此，iframe将在用户交互后添加到DOM中。如何将粘贴事件侦听器附加到此iframe？

我最初尝试过这个。

jQuery(document, jQuery('iframe').contents()).on('paste', paste);

我可以看到，当我调用此方法时，这种方法不起作用，因为iframe不存在。所以我尝试在任何添加的iframe上附加load事件。至少我虽然on会照顾这个......

jQuery(document).on('paste', paste);
jQuery('iframe').on('load', function() {
    jQuery(this).contents().on('paste', paste);
});

但事件load事件永远不会被触发。我做错了什么或有更优雅的方式？

编辑：我也尝试了第三种方法，但仍然没有触发加载事件：

jQuery(document).on('load', 'iframe', function() {
    jQuery(this).contents().on('paste', paste);
});

Answer 1

iframe的内容是否托管在其他域上？如果是这种情况，那么您无法添加事件处理程序的原因是same origin policy。试图规避它几乎是毫无意义的 - 我宁愿考虑采用不同的方法解决问题。

关于此主题，有几个answers on SO。 Like this one

Answer 2

我找到了一个特定于我的CMS（CQ 5.6.1）的解决方案，因此如果将来有人遇到类似的问题，我会将其作为我自己问题的答案发布。我还在问题中添加了cq和aem标签。

您可以将loadcontent侦听器添加到您可以从该字段访问iframe的richtext组件中：

loadcontent: function(field){
    jQuery(field.iframe).contents().on('paste', paste);
}

粘贴方法：

var paste = function(e) {
    var pastedText = jQuery('ul.placeholders li.selected').text();
    if (pastedText != '') {
        e.preventDefault();
        e.target.innerHTML = pastedText;
    }
}

尽管如果有人找到了实现这一目标的通用方法，请添加你的答案。

如何将事件添加到新添加的iframe

2 个答案: