This is the fourth day of my participation in Gwen Challenge
preface
It was developed for Echarts and AntV G2. What impressed me most about the documentation was how helpful the Demo pages were to the user. They not only provided rich examples, but also allowed you to modify the code and see the performance in real time.
Above is the Demo page for G2
The Demo page for Echarts is shown above
Seeing such a function, can not help but arouse my curiosity. Let me show you how to develop a simple online editing page that displays results in real time.
The development train of thought
To execute the code we entered, we can use the following methods:
eval
:eval('console.log("a simple script"); ');
new Function
:new Function('console.log("a simple script"); ') ();
iframe
Create a new iframe tag and dynamically inject HTML and JS code into it
To avoid affecting the code in the current context, we use iframe injection.
All we need to do is create an area on the page where we can input code, and dynamically fetch it at edit time and inject it into the iframe to achieve the desired functionality.
The code field
HTML page structure, here we use Codemirror as the code editor.
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <link rel="stylesheet" Href = "https://gw.alipayobjects.com/os/antv/assets/lib/codemirror-5.29.0/codemirror-merged.min.css" > < title >, live code</title> </head> <body> <main> <section> <button class="execute">Copy</button> <button class="run">Run</button> <textarea class="code"></textarea> </section> <section> <div class="preview"></div> </section> </main> <script src="./main.js"></script> </body> </html>Copy the code
Js code
import CodeMirror from "codemirror";
import "./style.css";
const $code = document.querySelector(".code");
const $iframeContainer = document.querySelector(".preview");
const $run = document.querySelector(".run");
const $copy = document.querySelector(".copy");
const htmlEditor = CodeMirror.fromTextArea($code, {
mode: "text/html",
extraKeys: {
"Ctrl-Space": "autocomplete"
},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
lineNumbers: true,
lineWrapping: false
});
function syncCode() {
$iframeContainer.innerHTML = "<iframe></iframe>";
const iframe = document.querySelector('iframe')
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write(htmlEditor.getValue());
iframeDoc.close();
}
$run.addEventListener("click", syncCode);
Copy the code
The above code with syncCode is used to edit the code to show the effect of the iframe inside, here attached to the DEMO source address, welcome to download and run.
A simple running example is shown below
instructions
The sample code references the implementation of an older version of ANTV’s online demo. The new implementation of ANTV can be learned here, the core code is as follows
const execute = debounce( ( code: string, node: HTMLDivElement, exampleContainer: string | undefined, ) => { const script = document.createElement('script'); script.innerHTML = ` try { ${code} } catch(e) { if (window.__reportErrorInPlayGround) { window.__reportErrorInPlayGround(e); }} `; // eslint-disable-next-line no-param-reassign node.innerHTML = exampleContainer || '<div id="container" />'; node! .appendChild(script); }, 300,);Copy the code
Existing mature programs
We can use the existing mature products: Codepen, StackBlitz, CodeSandbox, jsbin.
The React and Vue ecosystems have their own real-time code editing and preview components:
-
vue-live :
A lightweight playground for live editing VueJs code in the browser
-
react-live:
React Live
brings you the ability to render React components with editable source code and live preview.
The resources
- Js sandbox contents
- Bytedance’s micro front end sandbox practice