javascript - 突出显示 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();
   });
});