樣子是和 codepen 很像沒錯(cuò)，因?yàn)槲揖褪菂⒖歼@里的樣式。

前景提要

react-monaco-editor 是 Monaco Editor 的 react 版本，而 Monaco Editor 就是為我們 VS Code 提供代碼編輯器的支持。

要使用代碼高亮，自動(dòng)補(bǔ)全，驗(yàn)證功能，需要再安裝個(gè) monaco-editor-webpack-plugin 插件。

我是用 umi 開發(fā)，所以是要在.umirc.ts

import { defineConfig } from 'umi';
import Monacoplugin from 'monaco-editor-webpack-plugin';
export default defineConfig({
  chainWebpack(config, { webpack }) {
    config.plugin('Monacoplugin').use(Monacoplugin);
  },
});

具體的配置項(xiàng) options ，參考 Monaco 接口 IEditorConstructionOptions
具體支持的編程語言可以去這里，Language 旁邊的選擇框里查看

初次

初次寫的時(shí)候，本想簡(jiǎn)單粗暴，通過 dangerouslySetInnerHTML 直接生成。

<style dangerouslySetInnerHTML={{ __html:Css }}></style> 
<script type="text/javascript" dangerouslySetInnerHTML={{ __html:Js }}></script>
<div dangerouslySetInnerHTML={{ __html:Html }}></div> 

這樣子，html 和 css 是沒問題，但 js 是不生效的。（應(yīng)該和安全機(jī)制有關(guān)系）
要怎么做呢？用最原始的方式。

let script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild(document.createTextNode("function chestnut() {alert('hi');}"),);
document.body.appendChild(script);

但這樣子，會(huì)污染到全局變量，所以最后還是要用 iframe 來隔離一下。

iframe 版

想要獲取到 iframe 內(nèi)部的 DOM，可以使用 contentWindow 去訪問。

html 和 css 我是讓它實(shí)時(shí)更新，js 做了下防抖。
更新 js 代碼里面用了 eval 去執(zhí)行 js 代碼，用 try catch 去捕獲錯(cuò)誤，以保證 js 是正確可執(zhí)行的代碼。
然后每一次 js 更改，都會(huì)刷新 iframe，為了清空 iframe 內(nèi)之前的變量和函數(shù)。

取出時(shí)的命名沖突解決

代碼存了之后，有需要取出來的需求。但 css 和 js 會(huì)有命名沖突的可能。

• css 的隔離是通過給 html 一個(gè) id ，然后通過下面的正則去修改下 css 的字符串的

let bubbleCss = obj.bubbleCss.replace(
     /(?<!\w)\./g,
     `#bubble${obj.id} .`,
   );

• js 的隔離，蠻花費(fèi)我心思的。我是通過把 js 的作用域放到一個(gè)函數(shù)內(nèi)來減少污染全局的。然后修改 html 事件上調(diào)用的方法（下面的代碼是特地寫成 var 的）。

function scope(someJs: string) {
  try {
    return new Function(
      "func",
      "event",
      `${someJs}
       eval(func)
     `
    );
  } catch (e) {
    console.error(someJs);
  }
}

//隔離js到一個(gè)函數(shù)內(nèi)
let sandbox = scope(obj.bubbleJs);
let script = document.createElement("script");
script.type = "text/javascript";
script.id = "script";
script.appendChild(document.createTextNode(`var bubble${obj.id}=${sandbox}`));
document.body.appendChild(script);
document.body.removeChild(document.getElementById("script")!);

// 更改div中的調(diào)用事件方法名
let cunHtml = obj.bubbleHtml.replace(/'/g, '"');
let div = document.createElement("div");
div.innerHTML = obj.bubbleHtml;

changeOnNmae(div.childNodes);

function changeOnNmae(childNodes) {
  for (let node of childNodes) {
    for (let attr of node.attributes) {
      if (attr.nodeName.includes("on")) {
        cunHtml = cunHtml.replace(
          `${attr.nodeValue}`,
          `bubble${obj.id}('${attr.nodeValue}')`
        );
      }
    }
    if (node.childNodes > 0) {
      changeOnNmae(node.childNodes);
    }
  }
}
obj.bubbleHtml = cunHtml;

https://cloud.tencent.com/developer/article/1519556 這篇文章給的靈感，讓我這么隔離。

在線編輯主要代碼

代碼進(jìn)行了一些刪除，只留下了關(guān)鍵的代碼。

const Chestnut: React.FC = (props) => {
  const [bubbleHtml, setBubbleHtml] = useState('<div class="bubbleBox"></div>');
  const [bubbleCss, setBubbleCss] = useState(
    `.bubbleBox{
      background: radial-gradient(blue, transparent);
      } `
  );
  const [bubbleJs, setBubbleJs] = useState(``);
  const timerJs = useRef<null | NodeJS.Timeout>(null);

  function init(html: string, css: string, js: string) {
    updateHtml(html);
    updateCss(css);
    updateJs(js);
  }
  // 更新iframe內(nèi)的html
  function updateHtml(newValue: string) {
    let iframe = document.getElementsByTagName("iframe")[0].contentWindow!;
    iframe.document.body.innerHTML = newValue;
  }
  // 更新iframe內(nèi)的css
  function updateCss(newValue: string) {
    let iframe = document.getElementsByTagName("iframe")[0].contentWindow!;
    iframe.document.head.innerHTML = `<style>
        body{
          display: flex;
          justify-content: center;
          align-items: center;
        }
        body >div{ min-width: 150px;
        min-height: 32px;
      }
  ${newValue}</style>`;
  }
  // 更新iframe內(nèi)的Js
  function updateJs(newValue: string) {
    try {
      eval(newValue); //判斷是否是可執(zhí)行的代碼
      let iframe = document.getElementsByTagName("iframe")[0].contentWindow!;
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.appendChild(document.createTextNode(newValue));
      iframe.document.body.appendChild(script);
      iframe.document.body.removeChild(
        iframe.document.body.getElementsByTagName("script")[0]
      );
    } catch (e) {
      console.log(newValue);
    }
  }

  return (
    <div>
      <MonacoEditor
        width="100%"
        height="calc( 100% - 30px)"
        language="html"
        theme="vs-dark"
        value={bubbleHtml}
        options={{
          automaticLayout: true,
          formatOnType: true,
        }}
        onChange={(newValue) => {
          setBubbleHtml(newValue);
          updateHtml(newValue);
        }}
      />

      <MonacoEditor
        width="100%"
        height="calc( 100% - 30px)"
        language="css"
        theme="vs-dark"
        value={bubbleCss}
        options={{
          automaticLayout: true,
          formatOnType: true,
        }}
        onChange={(newValue) => {
          setBubbleCss(newValue);
          updateCss(newValue);
        }}
      />
      <MonacoEditor
        width="100%"
        height="calc( 100% - 30px)"
        language="javascript"
        theme="vs-dark"
        value={bubbleJs}
        options={{
          automaticLayout: true,
          formatOnType: true,
        }}
        onChange={(newValue) => {
          setBubbleJs(newValue);
          if (timerJs.current) {
            clearTimeout(timerJs.current);
          }
          //刷新iframe，重置全局執(zhí)行環(huán)境Windows，清空之前推入的變量和函數(shù)
          document
            .getElementsByTagName("iframe")[0]
            .contentWindow!.location.reload(true);

          timerJs.current = setTimeout(() => {
            init(bubbleHtml, bubbleCss, newValue);
          }, 1000);
        }}
      />
      <iframe style={{ width: "100%", height: "100%", border: 0 }}></iframe>
    </div>
  );
};