[英]How to render the “result” view in CodeMirror?
我在react中创建了一个组件,该组件允许在两个CodeMirror编辑器视图中编辑两个状态:codeHtml和codeCss:
import React from "react";
import CodeMirror from "react-codemirror";
require('codemirror/mode/htmlembedded/htmlembedded');
require('codemirror/mode/css/css');
export default class HtmlComponent extends React.Component {
constructor(props) {
super();
this.state = {
codeHtml:'<div class="comeClass">some test div text</div>',
codeCss:'.someClass{color:"red"}',
}
}
updateHtmlCode(newCode) {
this.setState({
codeHtml: newCode,
});
}
updateCssCode(newCode) {
this.setState({
codeCss: newCode,
});
}
render() {
console.log(this.state);
return(
<div>
HTML editor:
<CodeMirror value={this.state.codeHtml} onChange={this.updateHtmlCode.bind(this)} options={{mode:"htmlembedded",lineNumbers: true}} />
CSS editor:
<CodeMirror value={this.state.codeCss} onChange={this.updateCssCode.bind(this)} options={{mode:"css",lineNumbers: true}} />
</div>
)
}
}
我需要将生成的DOM渲染为第三种视图,但是我在文档中找不到任何内容: https : //codemirror.net/doc/manual.html
使用CodeMirror的目的是避免必须处理扩展整个网站CSS文件的逻辑。
是使用CodeMirror的方法吗?
呈现结果html代码的一种简单方法是:
render() {
console.log(this.state);
const hCode = this.state.codeHtml;
const cCode = this.state.codeCss;
return(
<div>
HTML editor:
<CodeMirror value={this.state.codeHtml} onChange={this.updateHtmlCode.bind(this)} options={{mode:"htmlembedded",lineNumbers: true}} />
CSS editor:
<CodeMirror value={this.state.codeCss} onChange={this.updateCssCode.bind(this)} options={{mode:"css",lineNumbers: true}} />
<div dangerouslySetInnerHTML={{__html:hCode}}></div>
</div>
)
}
但是,有没有一种简单的方法可以将CSS应用于生成的html?
解决方案是将html
代码添加到iframe
,然后使用js
或jquery
在iframe
的标头中附加和更新style
标签:
updateStyleTagOnView(cCode){
const head = jQuery("#iframe").contents().find("head");
const css = '<style type="text/css">' + cCode + '</style>';
jQuery(head[0]).empty().append(css);
}
render() {
const hCode = this.state.codeHtml;
const cCode = this.state.codeCss;
const mCode = this.state.mixedCode;
this.updateStyleTagOnView(cCode)
return(
<div>
HTML editor:
<CodeMirror value={this.state.codeHtml} onChange={this.updateHtmlCode.bind(this)} options={{mode:"htmlembedded",lineNumbers: true}} />
CSS editor:
<CodeMirror value={this.state.codeCss} onChange={this.updateCssCode.bind(this)} options={{mode:"css",lineNumbers: true}} />
CSS editor:
<CodeMirror value={this.state.mixedCode} onChange={this.updateMixedCode.bind(this)} options={{mode:"css",lineNumbers: true}} />
<iframe id="iframe" srcDoc={hCode}>
<p>Your browser does not support iframes.</p>
</iframe>
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.