NodeJS 如何在预览中显示html+css与数据URL？

eh57zj3b 于 12个月前发布在 Node.js

关注(0)|答案(1)|浏览(115)

我有两个tab控件：一个用来插入HTML文本，另一个用来插入CSS文本。然后我有一个预览来查看输出（HTML + CSS）。问题是，在预览中我只显示内容的HTML，但我不显示内容的CSS。

的数据
我在JavaScript中使用这个函数：

function showPreview() {
    var htmlContent = document.getElementById("editor").innerText;
    var cssContent = "<style>" + document.getElementById("cssContent").value + "</style>";
    var frame = document.getElementById("preview-window");
    // var jsContent = "<scri" + "pt>" + document.getElementById("jsCode").value + "</scri" + "pt>";

    // Create a data URL with the HTML content
    var dataURL = "data:text/html;charset=utf-8," + encodeURIComponent(htmlContent + cssContent);
  
    // Set the iframe src attribute to the data URL
    frame.src = dataURL;
  }
  
  showPreview()

字符串
我做错了什么？怎么解决？

代码嗅探器

function showPreview() {
  var htmlContent = document.getElementById("editor").innerText;
  var cssContent = "<style>" + document.getElementById("cssContent").value + "</style>";
  // var jsContent = "<scri" + "pt>" + document.getElementById("jsCode").value + "</scri" + "pt>";
  var frame = document.getElementById("preview-window");

  // Create a data URL with the HTML content
  var dataURL = "data:text/html;charset=utf-8," + encodeURIComponent(htmlContent + cssContent);

  // Set the iframe src attribute to the data URL
  frame.src = dataURL;
}

showPreview()

#editor,
#cssContent {
  width: 456px;
  height: 267px;
  padding: 10px;
  background-color: #d8d8d8;
  color: rgb(0, 0, 0);
  font-size: 14px;
  font-family: monospace;
  white-space: pre;
}

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">

  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">HTML</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">CSS</button>
    </li>
  </ul>

  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      <div id="editor" contenteditable="true" oninput="showPreview();">&lt;div>This is a Div&lt;/div>
      </div>
    </div>

    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <div id="cssContent" contenteditable="true" oninput="showPreview()">&ltstyle&gt div { background-color: blue; color: white; } &lt/style&gt

      </div>
    </div>

  <h3>PREVIEW</h3>
  <div class="preview-area">
    <iframe id="preview-window"></iframe>
  </div>

</div>

node.js

来源：https://stackoverflow.com/questions/77761715/how-to-display-htmlcss-in-a-preview-with-an-data-url

1条答案

按热度按时间

0x6upsns1#

修改了标签ID和咏叹调标签，以匹配您正在构建的内容。
在将<style>移植到css时，不要在编辑器中硬编码<style>，只在变量中使用这些标记，否则最终会有两次<style><style>。
正确使用Element.textContent而不是.innerText或.value（因为您正在DIV元素上使用contenteditable属性）。没有经过彻底测试，但应该给予您一个坚定的观点来继续前进：

const elHTML = document.querySelector("#html");
const elCSS = document.querySelector("#css");
const elJS = document.querySelector("#js");
const elPreview = document.querySelector("#preview");

function showPreview() {
  const html = elHTML.textContent;
  const css = `<style>${elCSS.textContent}</style>`;
  const js = `<scr` + `ipt>${elJS.textContent}</scr` + `ipt>`;
  const dataURL = "data:text/html;charset=utf-8," + encodeURIComponent(css + html + js);

  elPreview.src = dataURL;
}

showPreview()

.container-fluid {
  display: flex;
}

#editor {
  flex: 1;
}

#html,
#css,
#js {
  padding: 1rem;
  height: 160px;
  background-color: #d8d8d8;
  color: rgb(0, 0, 0);
  font-size: 14px;
  font-family: monospace;
  white-space: pre;
}

#preview {
  display: block;
  width: 100%;
}

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-fluid">

  <div class="area" id="editor">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="html-tab" data-bs-toggle="tab" data-bs-target="#html" type="button" role="tab" aria-controls="html" aria-selected="true">HTML</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="css-tab" data-bs-toggle="tab" data-bs-target="#css" type="button" role="tab" aria-controls="css" aria-selected="false">CSS</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="js-tab" data-bs-toggle="tab" data-bs-target="#js" type="button" role="tab" aria-controls="js" aria-selected="false">JAVASCRIPT</button>
      </li>
    </ul>

    <div class="tab-content" id="myTabContent">

      <div id="html" class="tab-pane fade show active" role="tabpanel" aria-labelledby="html-tab" contenteditable="true" oninput="showPreview();">&lt;div>This is a DIV&lt;/div>
      </div>

      <div id="css" class="tab-pane fade" role="tabpanel" aria-labelledby="css-tab" contenteditable="true" oninput="showPreview()">* { margin: 0; box-sizing: border-box; }
div {
  background-color: blue;
  color: white;
}</div>

      <div id="js" class="tab-pane fade" role="tabpanel" aria-labelledby="js-tab" contenteditable="true" oninput="showPreview();">addEventListener("click", () => {
    alert("hello!");
});</div>
    </div>
  </div>
  
  <div class="area">
    <h3>PREVIEW</h3>
    <div class="preview-area">
      <iframe id="preview"></iframe>
    </div>
  </div>
</div>

你可能会感兴趣：Make a simple code editor

赞(0）回复(0）举报 12个月前

我来回答

NodeJS 如何在预览中显示html+css与数据URL？

1条答案

相关问题

热门标签

最新问答