在IFrame中突出显示文本

Question

我正在尝试使用HTML，CSS和Javascript创建电子邮件签名生成器。 我目前由用户输入其详细信息的表单和创建签名的按钮组成。

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

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

我已经搜索过，这个答案似乎很受欢迎，但是我无法突出显示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帮助我走上正确的道路。

这是一个小提琴，展示了我所追求的行为。 基本上，我要复制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');
        }
    });
});