I want to create a copy button, click on it to copy the desired tactic to the board to use elsewhere

Ask the community
,
1

I want to create a copy button, click on it to copy the desired tactic to the board to use elsewhere

2

Do you mean a button for copying text to the clipboard of your device?

I don’t think that it is natively possible with Corvid, however a ’ Copy to Clipboard ’ function will be a great #featureRequest for Corvid.

For now you can do it using an HTML Component .

Suppose you have a particular text on your site, dataset or database which you want to let users copy to their device’s clipboard. First use the following code on your HTML component:

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript">

function init () {
  window.onmessage = (event) => {
    if (event.data) {
      insertMessage(event.data);
    }
  }
}

function insertMessage(msg) {
  document.getElementById('myInput').value = String(msg);
}

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
}

</script>

</head>

<style>
:root {
  background: #ffffff;
  color: #9c9c9c;
  font: 0.8rem "PT Sans", sans-serif;
}

html,
body,
.container {

}

a {
  color: inherit;
}
a:hover {
  color: #7f8ff4;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.uppercase {
  text-transform: uppercase;
}

.btn {
  display: inline-block;
  background: transparent;
  color: inherit;
  font: inherit;
  border: 0;
  outline: 0;
  padding: 0;
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  cursor: pointer;
}
.btn--primary {
  background: #C21B31;
  color: #fff;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  padding: 12px 15px;
}
.btn--primary:hover {
  background: #E21C21;
}
.btn--primary:active {
  background: #7f8ff4;
  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
}
.btn--inside {
  margin-left: -80px;
}

.form__field {
  width: 200px;
  background: #fff;
  color: #a3a3a3;
  font: inherit;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
  border: 0;
  outline: 0;
  padding: 17px 21px;
}

</style>

<body onload="init();">

  <div class="container">
	<div class="container__item">
		<form class="form">
			<input type="text" class="form__field" value="Loading Text" id="myInput" readonly/>
			<button type="button" class="btn btn--primary btn--inside uppercase" onclick="myFunction()">COPY LINK</button>
		</form>
	</div>
</div>

</body>
</html>

If you know a bit of HTML & CSS you can play around with the design.

After this you need to inject the ‘text’ you want to copy to the clipboard. You can do that using any event on the page such as a button click or even the page’s onReady() function. Something as simple as the below will suffice for your page code:

$w.onReady( function() {
    let text = 'Happy New Year 2020! The decade of Corvid begins!';
    $w('#html1').postMessage(text);
});
3

I have no words!!
Thank you Thank you Thank you!

I added this code to my table

$w.onReady( function () {
$w(“#table3”).onCellSelect( (event) => {
let cellData = event.cellData;
let text = cellData;
$w(‘#html1’).postMessage(text);
} );
});

And it works great !!!
Maybe this way you can also solve another problem that is discussed a lot here in the forum to do a print button

And thanks again friend !!!

4

hello and thanks for this code.
how to copy a text while keeping the line breaks ( \n) ?

in my example I generate random codes that I then want to copy
TY

let choix = $w('#nombre').value
for ( let i = 1; i <=  choix; ++i) {

entier = hasard (10000 , 100000000);
hasard ();
$w('#codes').text= $w('#codes').text + "\n" + entier.toString();
5

Not sure if you still needs the workaround, like shown in this example, because i have seen a “Copy2Clipboard-API” in the Velo-API-Docs…

https://www.wix.com/velo/reference/wix-window/copytoclipboard

import wixWindow from 'wix-window';
2
3// ...
4
5wixWindow.copyToClipboard("Text to copy!")
6  .then( () => {
7    // handle case where text was copied
8  } )
9  .catch( (err) => {
10    // handle case where an error occurred
11  } );

Perhaps it can help you.

6

copyToClipboard () is a strange function that does not copy the same way depending on the browser and where you paste.

for example with this copy :

63636638
88399393

With Safari :

it does not work, it opens a dialog box which suggests doing a ⌘ + C

1204×666 84.1 KB

With Firefox :

Paste on word : ok
63636638
88399393

Paste on powerpoint : no break line but a space
63636638 8399393

On Mail :
He does not paste anything

With Chrome :

Same as Firefox for word and powerpoint

On Mail : ok
63636638
88399393

7

I did never tried it out, perhaps someone can comment on this strange behaviour.

8

Someone can help me create code lines for creating more than 1 copy button?