Question

我正在开发一个在线代码编辑器的网站。用户可以加载可以键入HTML代码的页面，然后在表示编译的网页的小框架中显示（作为Web格式）。

呈现HTML的框架如下所示：

#responseWindow {
    width: 100%;
    height: 200px;
    background-color: white;
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: auto;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
}

将代码从编辑器传输到responseWindow的Javascript如下所示：

editor.getSession().on('change', function() {
     document.getElementById('responseWindow').innerHTML = editor.getValue();
});

通常所有键入的内容都保留在该帧内，但如果用户提供了div固定定位，则文本不会保留在框架内并显示在页面上的其他位置。例如：

<p style="top: 100px; right: 10px;">Hello world</p>

然后文本Hello World不在框架中。我的问题是如何为代码呈现某些类型的独立空间？如何让我的用户在框/框中渲染代码，以便他们可以预览它的样子？

Answer 1

将#responseWindow设为position: relative

定位元素与其最接近的祖先相对。现在，#responseWindow的{{1}}位置为static，不会被视为“定位”。

代码编辑器响应窗口

1 个答案: