Fatal编程技术网
  • javascript/
  • Javascript 将HTML转换为呈现的HTML

Javascript 将HTML转换为呈现的HTML

javascript html reactjs

Javascript 将HTML转换为呈现的HTML,javascript,html,reactjs,clipboard,Javascript,Html,Reactjs,Clipboard,下面是我的应用程序的简化版本，其中页面上呈现了一个模板，并在两个文本输入的帮助下填充 这是一个“模板生成器”类型的应用程序，我希望能够复制页面上呈现的完整模板，以便将其粘贴到其他地方。要正常执行此操作，请单击并拖动以高亮显示呈现的html，然后右键单击并复制或ctrl+c 如何将HTML转换为渲染版本，以便在react clipboard按钮的帮助下复制到剪贴板？或者我还有别的方法可以做到这一点吗 如果有什么不清楚的，请让我知道-提前谢谢 TL；DR：目前，当你点击“复制到剪贴板”时，应用程序正

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

这是一个“模板生成器”类型的应用程序，我希望能够复制页面上呈现的完整模板，以便将其粘贴到其他地方。要正常执行此操作，请单击并拖动以高亮显示呈现的html，然后右键单击并复制或ctrl+c

如何将HTML转换为渲染版本，以便在
react clipboard
按钮的帮助下复制到剪贴板？或者我还有别的方法可以做到这一点吗

如果有什么不清楚的，请让我知道-提前谢谢

TL；DR：目前，当你点击“复制到剪贴板”时，应用程序正在复制html。我希望它复制的内容，因为它将在网页上呈现。例如，转换和复制的hello world应复制一个表示hello world的红色h1

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;

import React，{Component}来自'React'；
从“材料ui”导入{TextField}；
从“react Clipboard.js”导入剪贴板；
导入“/App.css”；
康斯特标志https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png';
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“默认名称”，
标题：“默认标题”
};
}
componentDidMount（）{
this.setState（{template:this.createTemplate（this.state.name，this.state.title）}）；
}
createTemplate（名称、标题）{
常量模板=`
${name}
${title}
`
this.setState（{template}）；
}
updateValue（事件，类型）{
如果（类型=='name'）{
this.setState（{name:event.target.value}）；
this.createTemplate（event.target.value，this.state.title）；
}否则{
this.setState（{title:event.target.value}）；
this.createTemplate（this.state.name、event.target.value）；
}
}
render（）{
返回(
签名生成器


this.updateValue（e，'name'）}/>
this.updateValue（e，'title'）}/>
复制到剪贴板
);
}
}
导出默认应用程序；
您可以使用
ReactDOMServer.renderToStaticMarkup
将React组件转换为字符串，而不使用任何React特定的标记。如果您希望HTML稍后水合，可以使用
renderToString

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

问题是
react剪贴板
不支持复制HTML文本；您只需使用普通JS即可。不幸的是，剪贴板API相当挑剔

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

constcopyaction=e=>{
e、 预防默认值（）
e、 setData（'text/plain'，这是纯文本；请尝试粘贴到支持富文本的程序中'）
e、 setData（'text/html'，'HelloWorld'）
console.log（'Copy event captured！'）
}
常量应用=（）=>(
模仿我！
)
ReactDOM.render（，
document.getElementById（'root'））
问题是
react剪贴板
不支持复制HTML文本；您只需使用普通JS即可。不幸的是，剪贴板API相当挑剔

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

constcopyaction=e=>{
e、 预防默认值（）
e、 setData（'text/plain'，这是纯文本；请尝试粘贴到支持富文本的程序中'）
e、 setData（'text/html'，'HelloWorld'）
console.log（'Copy event captured！'）
}
常量应用=（）=>(
模仿我！
)
ReactDOM.render（，
document.getElementById（'root'））
虽然它是一个字符串，但它不是一个react组件（请参见
const template
）-这基本上是我想要复制的内容，但在网页上“呈现”（或任何单词）。那也一样吗？哦，对不起，我完全误解了。是否要从HTML代码段复制富文本？您可以尝试向页面呈现HTML，突出显示它，并触发一个副本，但不能保证。虽然它是一个字符串（请参见
const-template
），但它不是一个react组件-这基本上是我想要复制的内容，但“呈现”为网页（或任何单词）。那也一样吗？哦，对不起，我完全误解了。是否要从HTML代码段复制富文本？您可以尝试向页面呈现HTML，突出显示它，并触发一个副本，但不能保证。