gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 21:15:03 24 4
gpt4 key购买 nike

关闭。这个问题需要details or clarity .它目前不接受答案。












想改进这个问题?通过 editing this post 添加详细信息并澄清问题.


2年前关闭。







Improve this question




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

最佳答案

对于前端,很容易在 Stack Exchange 上模拟 Stack Snippets 如何工作的基础知识。一般的想法是为不同的部分(HTML/JS/CSS)创建文本区域,然后当你想要渲染它时,创建一个 iframe,其内容是通过插入文本区域值来创建的:

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>


以上是从 an example from Kaiido 调整而来在元。

这并不是 Stack Snippets 的工作方式——它们确实需要一个后端来获取表单值并构建浏览器看到的 HTML 响应——但它非常相似。

对于前端以外的任何东西,它都要复杂得多——您必须检索用户编写的源文本,向服务器发送请求以使用正确的语言运行它,然后将请求发送回客户端并渲染它。对于浏览器已经无法在本地运行的任何东西,都没有办法让“服务器基础设施”来处理和运行代码。

关于javascript - 如何在网站上添加实时代码编辑器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61421369/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com