时间戳

首页 > 解决方案 > 如何使用 react-froala-wysiwyg 在编辑器中显示动态内容 html

reactjs - 如何使用 react-froala-wysiwyg 在编辑器中显示动态内容 html

问题描述

我想知道如何使用 react (react-froala-wysiwyg) 在编辑器中显示动态脚本/html 内容。它显示但动态数据无法正常工作显示为 ${orderdate!''}

import React from "react";
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditor from 'react-froala-wysiwyg';

class AddEmail extends React.PureComponent {
  constructor(props) {
    super(props);


handleChange =()=>{
 this.setState({ emailbody: value });
}

render() {
 return (
  <React.Fragment>
           <div className="form-group col-lg-12 col-sm-12">
            <FroalaEditor
              model={this.state.emailbody}
              onModelChange={this.handleChange}
            />
          </div>    
  </React.Fragment>
);
}

 }
}


// Dynamic data from backend data

emailbody: {
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p>Order Confirm</p>
  ${orderdate!''} 
</body>
</html>
}

标签： reactjsreduxreact-reduxredux-sagafroala

解决方案

由于您的电子邮件正文数据是字符串而不是 JSX，因此您需要替换字符串本身。

const reactStringReplace = require('react-string-replace');
const backEndResponseString = "content here";
const emailBody = reactStringReplace(backEndResponseString, '${orderdate!''}', (match, i) => (
  <span>${orderdate}</span>
));
this.setState({
emailBody : emailBody
})

如果你有 JSX 内容，那么同样的工作方式如下：

this.state = {
      emailbody: `
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
        <p>Order Confirm</p>
          ${orderdate || ""} 
        </body>
        </html>`
    };

但由于您的后端响应是字符串，因此需要替换该值。

推荐阅读