解释剪贴板中的html代码并将其粘贴到html视图格式中

Question

I have some html code, for example, 我有一些html代码，例如，

<div><span style="background:yellowgreen">name:</span><span>Rose</span></div> , <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. 我想将代码复制并粘贴为RTF格式，这可以将html代码解析为真实的DOM。

I know that there is js clipBoardData, zeroClipBoard, clipBoard-polyfill, but they all have a compatibility problem. 我知道有js clipBoardData，zeroClipBoard，clipBoard-polyfill，但是它们都存在兼容性问题。 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. 在我看来，每个浏览器都可以解析html代码，而我复制的内容也都是用html编写的，当我将其粘贴到某个位置（例如某个网站的textarea时，浏览器可以解释这些内容并显示出来。 But how to achieve this? 但是如何实现呢？ Thanks in advance! 提前致谢！

Answer 1

You can do by simply setting the innerHTML of your desired element with the value of the textarea . 您可以通过简单地将所需元素的innerHTML设置为textarea的值来实现。

As for having a nice text editor to do this in the browser. 至于在浏览器中有一个不错的文本编辑器可以做到这一点。 Check out https://github.com/Microsoft/monaco-editor . 查看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>

Answer 2

You have to use one of the rich text editors. 您必须使用富文本编辑器之一。 Here you can see most advanced rich text editors. 在这里，您可以看到最高级的RTF编辑器。

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 这是javascript代码，可帮助您复制一些类型为text/plain ， text/html等类型的text/html 。您将需要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. 我在这里看到，这种类型的clipboarevent在现代浏览器中兼容。

Good luck. 祝好运。 If my answer helps you please please rate it as helpful 如果我的回答对您有帮助，请评价为有帮助

Answer 3

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). 检查HTML代码段是否对Javascript有效 -基于此，我“验证”了html，但是我不知道您是否有必要，是否希望输出正确无误（即使您使用html字符串）粘贴不是100％正确）。 If you want only the output to be correct then Devan's answer is the most simple 如果只希望输出正确，那么Devan的答案是最简单的

 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; 编辑：我为粗体和大文本添加了一些CSS #result {font-size：40px; font-weight: bold } 字体粗细}

解释剪贴板中的html代码并将其粘贴到html视图格式中

问题描述

3 个解决方案

解决方案1
0 2018-12-12 07:00:41

解决方案2
0 2018-12-12 07:14:38

解决方案3
0 2018-12-12 07:31:14

解释剪贴板中的html代码并将其粘贴到html视图格式中

问题描述

3 个解决方案

解决方案1 0 2018-12-12 07:00:41

解决方案2 0 2018-12-12 07:14:38

解决方案3 0 2018-12-12 07:31:14

解决方案1
0 2018-12-12 07:00:41

解决方案2
0 2018-12-12 07:14:38

解决方案3
0 2018-12-12 07:31:14