I have two tab controls: one to insert HTML text and the other to insert CSS text. Then I have a Preview to view the output (HTML + CSS). The problem is that in the preview I only display the HTML of the content, but I don’t also display the CSS of the content.
I am using this function in 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()
What am I doing wrong? How to solve?
Code Snippet
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();"><div>This is a Div</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div id="cssContent" contenteditable="true" oninput="showPreview()"><style> div { background-color: blue; color: white; } </style>
</div>
</div>
<h3>PREVIEW</h3>
<div class="preview-area">
<iframe id="preview-window"></iframe>
</div>
</div>