将内容从div复制到HTML中的textarea

Question

Main Target :

To create a website that will have a live preview of an HTML/CSS code. LINK

More specifically :

The HTML/CSS code will be editable form the user in some specific parts. So, the code in the live preview will not derive from text areas but from divs.

Image of what I am trying to do :

Progress so far : So, in my previous questions :

a) Question 1

b) Question 2

I tried to find a way to make the live preview box work after getting the code from the black boxes. It did not work because the code was given in a div tag and not a textarea . I would like to add that the code in the div tags use xmp tags because some parts are editable from the user.

So, I found out that the best solution is to keep the div tags in order for the user to change/alter the code and then use a hidden textarea that will be used for the live preview.

Main Question :

How can I copy the content of the div in the textarea ? I am using a JS script (below) to copy it in the clipboard. Is it possible to copy it in the textarea content?

After I do this, I will try to make it work without a copy(update code) button. Here is my script :

    $(document).ready(function() {

  var highestBox = 0;
  $('.top').each(function() {
    if ($(this).height() > highestBox) {
      highestBox = $(this).height();
    }
  });
  $('.top').height(highestBox);

});

document.getElementById("copyButton1").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget1"));
});

document.getElementById("copyButton2").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget2"));
});

function copyToClipboard(elem) {
      // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "textarea";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);

    // copy the selection
    var succeed;
    try {
          succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }

    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

Cheers

Answer 1

I combined many things I found online and made it work using this script:

    var MyDiv1 = document.getElementById('copyTarget2');
    var MyDiv2 = document.getElementById('copyTarget1');

    $('#Update').click(function(e) {

      textareahtml.value=$.trim(MyDiv1.innerText) 
      textareacss.value=$.trim(MyDiv2.innerText)
   });

and I put a button in my HTML code.