Copy Html
Opened this issue · 0 comments
Deleted user commented
I have some html I need to copy to clipboard in order to paste into a MailChimp template. Everything was working fine the way I expected it too, but suddenly it started falling back to a prompt and giving some errors about what I'm trying to copy is undefined.
copyToClipBoard = () => {
const msg = 'HTML Copied to Clipboard'
const type = 'info'
this.editor.exportHtml(data => {
console.log('data html', data.html);
const copyHtml = data.html
copy(copyHtml, {
debug: true,
message: 'Press #{key} to copy',
});
})
this.createSnack(msg, type)
}
I Dont understand why this was working fine and all of a sudden stopped? Here's what I'm trying to copy, I copied this out of the console log.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<style type="text/css">
#outlook a {
padding: 0; }
.ReadMsgBody {
width: 100%; }
.ExternalClass {
width: 100%; }
.ExternalClass * {
line-height: 100%; }
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt; }
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic; }
p, ul {
display: block;
margin: 0; }
@media only screen and (min-width: 480px) {
.email-col-17 {
width: 17% !important; }
.email-col-25 {
width: 25% !important; }
.email-col-33 {
width: 33% !important; }
.email-col-50 {
width: 50% !important; }
.email-col-67 {
width: 67% !important; }
.email-col-100 {
width: 100% !important; } }
@media only screen and (max-width: 480px) {
img.fullwidth {
max-width: 100% !important; } }
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if mso]>
<style type="text/css">
ul li {
list-style:disc inside;
mso-special-format:bullet;
}
</style>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix {
width:100% !important;
}
</style>
<![endif]-->
</head>
<body id="u_body" class="u_body" width="100%" bgcolor="#e7e7e7" style="margin: 0; mso-line-height-rule: exactly; background-color: #e7e7e7;">
<div style="background-color: #e7e7e7; font-family: arial,helvetica,sans-serif;">
<table id="u_row_1" class="u_row" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0">
<tr>
<td align="center" valign="top" bgcolor="" style="padding: 10px; background-color: ;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="500" align="center" style="width:500px;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:500px;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;" bgcolor="">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:500px;">
<![endif]-->
<div id="u_column_1" class="email-col-100 outlook-group-fix u_column" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table id="u_content_button_2" class="u_content_button" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
<div align="center">
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:36px; v-text-anchor:middle; width:110px;" arcsize="11%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
<a href="" target="_blank" style="display: inline-block;font-family:arial,helvetica,sans-serif;text-decoration: none;-webkit-text-size-adjust: none;text-align: center;color: #FFFFFF; background-color: #3AAEE0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width: auto; padding: 10px 20px; mso-border-alt: none;">
<span style="line-height:120%;">Button Text</span>
</a>
<!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
<table id="u_content_button_3" class="u_content_button" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
<div align="center">
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:36px; v-text-anchor:middle; width:110px;" arcsize="11%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
<a href="" target="_blank" style="display: inline-block;font-family:arial,helvetica,sans-serif;text-decoration: none;-webkit-text-size-adjust: none;text-align: center;color: #FFFFFF; background-color: #3AAEE0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width: auto; padding: 10px 20px; mso-border-alt: none;">
<span style="line-height:120%;">Button Text</span>
</a>
<!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
<table id="u_content_button_4" class="u_content_button" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
<div align="center">
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:45px; v-text-anchor:middle; width:120px;" arcsize="9%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
<a href="" target="_blank" style="display: inline-block;font-family:arial,helvetica,sans-serif;text-decoration: none;-webkit-text-size-adjust: none;text-align: center;color: #FFFFFF; background-color: #3AAEE0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width: auto; padding: 10px 20px; mso-border-alt: none;">
<span style="line-height:120%;">Button Text</span>
</a>
<!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
<table id="u_content_button_1" class="u_content_button" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="overflow-wrap: break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
<div align="center">
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;font-family:arial,helvetica,sans-serif;"><tr><td style="font-family:arial,helvetica,sans-serif;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:45px; v-text-anchor:middle; width:120px;" arcsize="9%" stroke="f" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#FFFFFF;font-family:arial,helvetica,sans-serif;"><![endif]-->
<a href="" target="_blank" style="display: inline-block;font-family:arial,helvetica,sans-serif;text-decoration: none;-webkit-text-size-adjust: none;text-align: center;color: #FFFFFF; background-color: #3AAEE0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width: auto; padding: 10px 20px; mso-border-alt: none;">
<span style="line-height:120%;">Button Text</span>
</a>
<!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>
</html>
and the errors:
index.js:49 unable to copy using execCommand: Error: copy command was unsuccessful
at copy (index.js:45)
at Object.eval (EmailCanvas.js:119)
at e.value (embed.js:1)
at e.value (embed.js:1)
at embed.js:1
copy @ index.js:49
(anonymous) @ EmailCanvas.js:119
value @ embed.js:1
value @ embed.js:1
(anonymous) @ embed.js:1
index.js:50 trying IE specific stuff
copy @ index.js:50
(anonymous) @ EmailCanvas.js:119
value @ embed.js:1
value @ embed.js:1
(anonymous) @ embed.js:1
index.js:55 unable to copy using clipboardData: TypeError: Cannot read property 'setData' of undefined
at copy (index.js:52)
at Object.eval (EmailCanvas.js:119)
at e.value (embed.js:1)
at e.value (embed.js:1)
at embed.js:1
copy @ index.js:55
(anonymous) @ EmailCanvas.js:119
value @ embed.js:1
value @ embed.js:1
(anonymous) @ embed.js:1
index.js:56 falling back to prompt