如何在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>
    ) 
}