1

I have some html code, for example,

<div><span style="background:yellowgreen">name:</span><span>Rose</span></div>,

I want to copy and paste the code into rich text format, which can resolve the html code into real DOM.

I know that there is js clipBoardData, zeroClipBoard, clipBoard-polyfill, but they all have a compatibility problem. I want to write one, which can work for most browsers, how can I do this? some idea?

In my mind, each browser can resolve html code, and the stuff I copied also written in html, when I paste it in someplace, such as textarea in some website, the browser can interpret the stuff and display it. But how to achieve this? Thanks in advance!

Rohan Dhar
  • 1,827
  • 1
  • 10
  • 21
Feeoly
  • 23
  • 4

3 Answers3

0

You can do by simply setting the innerHTML of your desired element with the value of the textarea.

As for having a nice text editor to do this in the browser. Check out https://github.com/Microsoft/monaco-editor.

const buttonElement = document.getElementById("submit");
const inputElement = document.getElementById("input");
const outputElement = document.getElementById("output");

buttonElement.onclick = function() {
    output.innerHTML = inputElement.value;
};

buttonElement.click();
#output {
  border: 1px solid black;
}
<textarea id="input"><h1>test</h1></textarea>
<button id="submit">submit</button>
<div id="output">
</div>
Devan Buggay
  • 2,717
  • 4
  • 26
  • 35
  • 1
    this is help! Thank you! but how i do this, if the output area is another page? I copy

    test

    to my clipboard, then past it into my email(output page), I want to see it interpret

    test

    into html view(large and bold fonts)     – Feeoly Dec 12 '18 at 08:42
0

You have to use one of the rich text editors. Here you can see most advanced rich text editors.

clipboard.setData('text/plain', selection.getText());
clipboard.setData('application/officeObj’, selection.serialize());
clipboard.setData('image/bmp', draw(selection));
clipboard.setData('text/html', '<div><span style="background:yellowgreen">name:</span><span>Rose</span></div>');

This is javascript code which helps you to copy some text with type such as text/plain , text/html etc. you will need text/html

Your question is if this code is compatible in every browsers? right? As I see Here this type of clipboarevent is compatible in modern browsers.

Good luck. If my answer helps you please please rate it as helpful

Malkhazi Dartsmelidze
  • 4,783
  • 4
  • 16
  • 40
0

Check if HTML snippet is valid with Javascript - based on this I "validate" the html but I don't know if it's necessary to you, if you want or not to have just the output to be correct (even if the html string you paste is not 100% correct). If you want only the output to be correct then Devan's answer is the most simple

function tidy(html) {
    var d = document.createElement('div');
    d.innerHTML = html;
    return d.innerHTML;
}

function print(){
    //get input from textbox
    var htmlInputValue = document.getElementById("htmlInput").value;
    // "validate" as html
    var result = tidy(htmlInputValue);
    //print it
    document.getElementById("result").innerHTML = result;
}

var myInput  = document.getElementById("htmlInput");
myInput.addEventListener("input", print, false);
#result {
  font-size: 40px;
  font-weight: bold
  
}
<html>
  <body>

    <label for="input">Enter your html here </label>
    <input class="myInput" id="htmlInput" value="">

    <p id="result"/> 

  </body>
</html>

Edit: i added some css for bold and large text #result { font-size: 40px; font-weight: bold }

Mara Black
  • 1,666
  • 18
  • 23
  • hello but if the id="result" area is another page, how do i do this? e.g. I copy

    test

    to my clipboard, then past it into my email(output page), I want to see it interpret

    test

    into html view(large and bold fonts). Thanks!     – Feeoly Dec 12 '18 at 09:15
  • Hmm, I don't know but you can take a look here [getElementById from another page](https://stackoverflow.com/questions/27930780/getelementbyid-from-another-page) and here [Thread: document.getElementById from another page?](http://www.dynamicdrive.com/forums/showthread.php?67448-document-getElementById-from-another-page) – Mara Black Dec 12 '18 at 10:04
  • About the large and bold, i eddited the answer – Mara Black Dec 12 '18 at 10:09