我在我的项目中使用了反应套筒。
在页面加载时,会调用一个api来获取html内容。样本响应如下。
{
"success": true,
"response": {
"document": {
"id": "03cb14d6-46d3-11e8-acb9-408d5ce49fe0",
"name": "Letter",
"html_content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<title>HR3-Offer Letter</title>\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<style>\n\t\tbody {\n\t\t\tfont-family: \"Times New Roman\", Times, serif;\n\t\t\tfont-size: 16px;\n\t\t\ttext-align: left;\n\t\t\tline-height: 1.2;\n\t\t}\n\t\th1,\n\t\th2,\n\t\th3,\n\t\th4, h5, h6 {\n\t\t\tfont-weight: normal;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t#content-wrap {\n\t\t\tbackground: #fff;\n\t\t\tpadding: 50px;\n\t\t}\n\t\t.txt-center {\n\t\t\ttext-align: center;\n\t\t}\n\t\t.txt-upper {\n\t\t\ttext-transform: uppercase;\n\t\t}\n\t\th1 {\n\t\t\tmargin-bottom: 10px;\n\t\t\tfont-size: 23px;\n\t\t}\n\t\tp {\n\t\t\tmargin-bottom: 30px;\n\t\t}\n\t\t.contact-person {\n\t\t\tborder-top: 1px solid #000;\n\t\t\tpadding-top: 40px;\n\t\t\tmargin-bottom: 80px;\n\t\t\twidth: 70%;\n\t\t}\n\t\t.contact-person p {\n\t\t\tmargin: 5px 0 0 0;\n\t\t}\n\t\t.offer-accepted {\n\t\t\tmargin-bottom: 50px;\n\t\t}\n\t\t.offer {\n\t\t\tmargin-right: 15px;\n\t\t}\n\t\t.signature-date .label,\n\t\t.signature-date .value {\n\t\t\tdisplay: inline-block;\n\t\t\twidth: 180px;\n\t\t}\n\t\t.signature-date .label {\n\t\t\twidth: 177px;\n\t\t}\n\t\t.signature-date .value {\n\t\t\tborder-bottom: 1px solid #000;\n\t\t}\n\t\t.highlighter {\n\t\t\tbackground: #ffff00;\n\t\t}\n\t</style>\n</head>\n<body>\n\t<div id=\"content-wrap\">\n\t\t<h1 class=\"txt-center txt-upper\"><%= COMPANY %></h1></body>\n</html>",
"status": 1
}
}
}
html_content 键具有完整的html代码,其中包括doctype,html,标题,标头标记等。
此html字符串使用代码在编辑器中呈现
<ReactQuill
onChange={this.handleChange}
modules={this.modules}
formats={this.formats}
value={this.props.value}
/>
问题在于,在渲染编辑器html中的数据时,标题,标题标记已删除。如果您查看原始来源,只有内容可用,并且不会有任何html或head或style标签。
在编辑器中编辑完数据后,我需要将整个 html字符串(包括html,head)传递给后端。
关于如何实现这一目标的任何想法?