¿cuál es el html, css y script para hace un editor html con vista previa en tiempo real a un lado; y botones para agregar codigos y etiquetas html?
Aquí te muestro un ejemplo para crear un editor HTML con vista previa en tiempo real a un lado y botones para agregar etiquetas y códigos HTML:
HTML:
```
<div class="container">
<div class="editor-column">
<textarea id="html-input" placeholder="Ingrese su HTML aquí"></textarea>
<div class="buttons">
<button id="code-btn" onclick="addCode('<code>', '</code>')">Código</button>
<button id="header-btn" onclick="addCode('<h1>', '</h1>')">Encabezado 1</button>
<button id="para-btn" onclick="addCode('<p>', '</p>')">Párrafo</button>
<button id="link-btn" onclick="addHref()">Enlace</button>
</div>
</div>
<div class="preview-column">
<iframe id="preview-frame"></iframe>
</div>
</div>
```
CSS:
```
.container {
display: flex;
flex-direction: row;
margin: 20px;
}
.editor-column {
flex: 1;
}
.editor-column textarea {
width: 100%;
height: 100%;
border: none;
}
.editor-column .buttons {
margin-top: 10px;
}
.editor-column .buttons button {
margin-right: 10px;
}
.preview-column {
flex: 1;
margin-left: 20px;
}
.preview-column iframe {
border: none;
width: 100%;
height: 100%;
}
```
JavaScript:
```
var htmlInput = document.getElementById("html-input");
var preview = document.getElementById("preview-frame").contentWindow.document;
function updatePreview() {
preview.open();
preview.write(htmlInput.value);
preview.close();
}
function addCode(startTag, endTag) {
var selected = htmlInput.selectionStart;
var content = htmlInput.value;
htmlInput.value = content.substring(0, selected) + startTag + content.substring(selected, htmlInput.selectionEnd) + endTag + content.substring(htmlInput.selectionEnd);
updatePreview();
}
function addHref() {
var url = prompt("Escribe la URL:");
if (url != null) {
addCode('<a href="' + url + '">', '</a>');
}
}
htmlInput.addEventListener("input", updatePreview);
updatePreview();
```
Este código genera dos columnas, una para el editor HTML y otra para la vista previa. El editor HTML es un `textarea` que admite diferentes etiquetas HTML que se pueden agregar a través de los botones en la parte superior del editor. La vista previa se actualiza en tiempo real para mostrar los cambios que se hacen en el editor.