Aquí te dejo un ejemplo sencillo de cómo crear un editor HTML con vista previa a un lado y botones arriba para agregar etiquetas o códigos HTML.
HTML:
```
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editor HTML</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="toolbar">
<button onclick="addTag('<b>', '</b>')">Bold</button>
<button onclick="addTag('<i>', '</i>')">Italic</button>
<button onclick="addTag('<u>', '</u>')">Underline</button>
<button onclick="addTag('<br>')">Line break</button>
</div>
<div class="editor">
<textarea id="textArea" oninput="preview()"></textarea>
</div>
<div class="preview">
<p id="preview"></p>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
```
CSS:
```
.container {
display: flex;
flex-direction: row;
}
.editor,
.preview {
width: 50%;
padding: 10px;
}
textarea {
width: 100%;
height: 100%;
border: none;
resize:none;
}
.toolbar {
display: flex;
flex-direction: row;
background: #eee;
padding: 10px;
}
button {
margin-right: 5px;
}
```
Javascript:
```
function addTag(openingTag, closingTag = '') {
const textField = document.getElementById('textArea');
const startPos = textField.selectionStart;
const endPos = textField.selectionEnd;
const selectedText = textField.value.substring(startPos, endPos);
const newText = textField.value.slice(0, startPos) + openingTag + selectedText + closingTag + textField.value.slice(endPos);
textField.value = newText;
textField.focus();
textField.setSelectionRange(startPos + openingTag.length, endPos + openingTag.length);
preview();
}
function preview() {
const textField = document.getElementById('textArea');
const preview = document.getElementById('preview');
preview.innerHTML = textField.value;
}
```
Explicación:
- La estructura HTML incluye tres divs, uno para la barra de herramientas, otro para el editor de texto y otro para la vista previa.
- La barra de herramientas contiene botones que llaman a la función addTag con los valores HTML de las etiquetas correspondientes.
- La función addTag agrega las etiquetas HTML seleccionadas en la posición correcta dentro del editor de texto y actualiza la vista previa de la parte derecha.
- La función preview simplemente actualiza la vista previa de la parte derecha a medida que se va escribiendo en el editor de texto.
- La hoja de estilo define la estructura básica de la página y los estilos para los diferentes elementos.
- El archivo de JavaScript implementa la funcionalidad de agregar etiquetas o códigos HTML y actualizar la vista previa.
Nota: Este ejemplo es solo un punto de partida y se puede modificar según las necesidades específicas de tu proyecto.
