HTML 到呈现的 html答案

【问题标题】：HTML to rendered htmlHTML 到呈现的 html
【发布时间】：2018-04-11 15:05:19
【问题描述】：

下面是我的应用程序的简化版本，其中在页面上呈现了一个模板，并在两个文本输入的帮助下填充。

这是一个“模板生成器”类型的应用程序，我希望能够复制页面上呈现的完整模板，以便将其粘贴到其他地方。要做到这一点，您通常会单击 + 拖动以突出显示呈现的 html，然后右键单击 + 复制或 ctrl + c。

如何将我的 HTML 转换为呈现的版本，以便我可以在 react-clipboard 按钮的帮助下复制到剪贴板？还是有另一种方法可以实现这一目标？

如果有任何不清楚的地方，请告诉我 - 提前致谢

TL;DR：目前，当您单击“复制到剪贴板”时，应用正在复制 html。我希望它复制内容，因为它会在网页上呈现。例如 hello world 转换和复制应该复制一个红色的 h1，上面写着 hello world。

import React, { Component } from 'react';
import { TextField } from 'material-ui';
import Clipboard from 'react-clipboard.js';
import './App.css';
const logo = 'https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'Default Name',
      title: 'Default Title'
    };
  }
  componentDidMount() {
    this.setState({template: this.createTemplate(this.state.name, this.state.title) });
  }
  createTemplate(name, title) {
    const template = `<!DOCTYPE html>
    <html>
      <head>
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
      </head>
      <body>
        <h1>${name}</h1>
        <h2>${title}</h2>
      </body>
    </html>`

    this.setState({template});
  }
  updateValue(event, type) {
    if(type === 'name') {
      this.setState({name: event.target.value});
      this.createTemplate(event.target.value, this.state.title);
    } else {
      this.setState({title: event.target.value});
      this.createTemplate(this.state.name, event.target.value);
    }
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Signature Builder</h1>
        </header>
        <div>
          <br/>
          <TextField hintText="Name" onChange={(e) => this.updateValue(e, 'name')} />
          <TextField hintText="Title" onChange={(e) => this.updateValue(e, 'title')} />
          <div style={{textAlign: 'left', margin: 10}} dangerouslySetInnerHTML={{ __html: this.state.template }} />
          <Clipboard data-clipboard-text={this.state.template}>
            copy to clipboard
          </Clipboard>
        </div>
      </div>
    );
  }
}

export default App;

【问题讨论】：

标签： javascript html reactjs clipboard

【解决方案1】：

问题是react-clipboard不支持复制HTML文本；你只需要使用普通的 JS 来完成它。不幸的是，剪贴板 API 相当挑剔。

您可以通过不使用按钮并捕获 onCopy 事件来更改剪贴板复制的内容来解决一些问题。

const copyAction = e => {
  e.preventDefault()
  e.clipboardData.setData('text/plain', 'This is plaintext; try pasting into a program that supports rich text')
  e.clipboardData.setData('text/html', '<h1>Hello</h1><h2>World</h2>')
  console.log('Copy event captured!')
}

const App = () => (
  <div onCopy={copyAction}>
    Copy me!
  </div>)
  
ReactDOM.render(<App />,
  document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root' />

当然，HTML 文本本身的内容可以随心所欲地创建，无论是通过模板文字还是通过使用 ReactDOMServer，如 coreyward suggested。

更多信息：

【讨论】：

【解决方案2】：

您可以使用ReactDOMServer.renderToStaticMarkup 将您的 React 组件转换为没有任何 React 特定标签的字符串。如果您希望 HTML 稍后被水合，您可以改用 renderToString。

https://reactjs.org/docs/react-dom-server.html

【讨论】：

它不是一个反应组件，尽管它是一个字符串（参见const template）——这本质上是我想要复制的，但在网页上“呈现”（或任何单词）。它会和它一样工作吗？
哦，对不起，我完全误解了。您想从 HTML sn-p 复制富文本？您可以尝试将 HTML 呈现到页面、突出显示它并触发副本，但不能保证。