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!

3 Answers 3

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>

1
  • 1
    this is help! Thank you! but how i do this, if the output area is another page? I copy <h1>test</h1> to my clipboard, then past it into my email(output page), I want to see it interpret <h1>test</h1> into html view(large and bold fonts)
    – Feeoly
    Dec 12, 2018 at 8: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

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 }

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.