如何在网站上添加实时代码编辑器?

问题描述 投票:1回答:1

我正在创建一个网站,需要实时编辑代码(适用于Java,c,python,javascript等)。我知道codemirror,我想知道如何在网站上运行代码(例如W3Schools自己尝试一下功能)并在本地运行,而不需要服务器基础结构

javascript html css web-development-server
1个回答
1
投票

对于前端,很容易在此处模拟Stack Snippets在Stack Exchange上的工作原理。总体思路是为不同部分(HTML / JS / CSS)创建文本区域,然后在要呈现它时,创建一个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响应-但这非常相似。

对于除前端之外的任何其他事情,它要复杂得多-您必须检索用户编写的源文本,将请求发送到服务器以正确的语言运行它,然后将请求发送回给客户端并渲染它。对于浏览器尚不能在本地运行的任何事物,都无法通过“服务器基础结构”来处理和运行代码。

© www.soinside.com 2019 - 2024. All rights reserved.