如何在CodeMirror中呈现“结果”视图？

Question

我已经在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？

Answer 1

解决方案是将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>
    ) 
}