突出显示IFrame

Question

我正在尝试使用HTML，CSS和Javascript制作电子邮件签名生成器。我目前包含一个用户输入详细信息的表单和一个用于创建签名的按钮。

单击该按钮时，我将JS将用户输入的详细信息推送到HTML模板中，然后在同一页面上的IFrame中显示内容。我选择使用IFrame，以便签名样式与构建器页面使用的样式分开。

现在为了让用户更简单，我想添加一个突出显示IFrame内容的按钮，然后将其复制到剪贴板，以便用户粘贴到他们的Outlook电子邮件签名中。

我已经搜索了这个answer似乎相当受欢迎，但我无法突出显示IFrame的内容。关于我为使这项工作必须做些什么的任何想法？

Answer 1

这是一个在iframe中突出显示文本的JSFiddle。

它无法复制iframe的内容，但应该可以帮助您开始。如果用户点击iframe，他们可以复制内容。如果我弄清楚如何复制内容而不必点击iframe，我会告诉你。您可以从iframe中提取文本并将其放入当前文档中的临时隐藏表单中，但这似乎是一种混乱的解决方法。

https://jsfiddle.net/adio01/77LgnyLt/

$(document).ready(function() {
  $('#iframe').contents().find('body').html('<textarea class="highLight">Highlight Me</textarea>');

  $('#click').click(function() {
    var iframe = $('#iframe');
    $('.highlight', iframe.contents()).select();
   });
});

Answer 2

我设法弄明白我想做什么。非常感谢user3333134帮助我走上正轨。

这是一个fiddle，展示了我追求的行为。基本上iframe中有一些html内容我想要复制，就像用户用鼠标选择它然后将其复制到剪贴板一样。

$(document).ready(function () {
    $('#iframe').contents().find('body').html('<p>Line 1</p><p>Line 2</p>');

    $('#click').click(function () {
        var iframe = $('#iframe')[0];

        var doc = iframe.contentDocument;
        doc.execCommand('selectAll');

        try {
           var successful = doc.execCommand('copy');
           var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copying text command was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }
    });
});