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

【问题标题】：How to render the "result" view in CodeMirror?如何在 CodeMirror 中呈现“结果”视图？
【发布时间】：2018-03-12 10:36:58
【问题描述】：

我在 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 中？

【问题讨论】：

标签： javascript html css reactjs codemirror

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

【讨论】：