如何在网站上添加实时代码编辑器？ [关闭]
Posted
技术标签:
【中文标题】如何在网站上添加实时代码编辑器？ [关闭]【英文标题】：How to add a live code editor on website? [closed] 【发布时间】：2020-08-08 19:03:10 【问题描述】：我正在创建一个需要实时编辑代码（用于 Java、c、python、javascript 等）的网站。我知道 codemirror，我想知道如何在网站上运行代码（如 W3Schools 自己尝试功能）并在本地运行而不需要服务器基础架构
【问题讨论】：
不可能。 C 需要编译器，Python 和 Java 需要解释器。您需要使用服务器来调用它们的支持环境。 （您可以通过本地主机上的服务器在本地进行） 对于 JS 这很简单，您可以使用 iframe 在现有选项卡中创建沙箱上下文（这就是 codepen 的方式 IIRC）。对于其他语言，没有服务器架构就无法运行，唯一的方法是利用 emscripten / wasm。 【参考方案1】：对于前端，很容易在 Stack Exchange 上模拟 Stack Snippets 如何工作的基础知识。一般的想法是为不同的部分（html/JS/CSS）创建 textarea，然后当你想要渲染它时，创建一个 iframe，其内容是通过插入 textarea 值来创建的：
const [button, html, css, javascript, iframe] = document.querySelectorAll('button, textarea, iframe');
button.addEventListener('click', () =>
const fullHTML = `
<!doctype html><html>
<head><style>$css.value</style></head>
<body>$html.value<script>$javascript.value<\/script></body>
</html>`;
iframe.src = 'data:text/html,' + encodeURIComponent(fullHTML);
);textarea
display: block;
<button>Run</button>
<textarea><span id="span">a span</span></textarea>
<textarea>span color: green; </textarea>
<textarea>span.onclick = () => span.style.color = 'yellow';</textarea>
<iframe sandbox="allow-scripts"></iframe>以上内容是从 Meta 上的 an example from Kaiido 调整而来的。
这并不是 Stack Snippets 的工作方式——它们确实需要一个后端来获取表单值并构建浏览器看到的 HTML 响应——但它非常相似。
对于前端以外的任何东西，它都要复杂得多 - 您必须检索用户编写的源文本，向服务器发送请求以使用正确的语言运行它，然后发送请求返回客户端并渲染它。对于浏览器无法在本地运行的任何东西，都没有办法使用“服务器基础架构”来处理和运行代码。
【讨论】：
以上是关于如何在网站上添加实时代码编辑器？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章