个人中心
gpt4 book ai didi

javascript - HTML 到呈现的 html

转载 作者：行者123 更新时间：2023-11-28 17:33:21 24 4
gpt4 key购买 nike

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

这是一个“模板生成器”类型的应用程序，我希望能够复制页面上呈现的完整模板，以便可以将其粘贴到其他地方。通常要执行此操作，您可以单击 + 拖动以突出显示渲染的 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;

最佳答案

问题在于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 文本本身的内容可以根据您的需要来创建，无论是通过模板文字还是通过使用像 coreyward suggested 这样的 ReactDOMServer .

<小时/>

更多信息:

关于javascript - HTML 到呈现的 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49778571/

24 4 0
文章推荐： javascript - 模板文字不是内插变量
文章推荐： javascript - 在 react 应用程序中位置更改之前解码网址
文章推荐： javascript - isNan 函数使下一行代码不起作用
文章推荐： Python 在第一行以外的任何行都找不到短语(新)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com