Cómo crear su propio editor Html en vivo como W3schools

Cómo crear su propio editor Html en vivo como W3schools

En este tutorial, construimos un editor Live Html usando Html, CSS y javascript sin usar bibliotecas o marcos.

editor html en vivo

¿Ha visto el editor de código w3schools que estamos construyendo similar a este pero en la versión simple?

¿Qué propiedades, atributos y elementos debemos usar para lograr esto?

  • contenido editable: si agregas contenteditable atributo a un elemento, se vuelve editable en el navegador.

  • contenido del texto: se usa para obtener el contenido de texto presente dentro del nodo dom.

  • HTML interno: EL innerHtml La propiedad se utiliza para obtener contenido HTML en lugar de texto.

Empecemos por escribir algo de marcado

creo un index.html y agregue el código a continuación.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet"  href="code.css">
    <title>Html editor</title>
</head>
<body>
    <div class="main-editor">
        <button class="btn">Run</button>
        <div class="first" contenteditable>
            writecode
        </div>
        <iframe class="second">
        </iframe>
    </div>

    <script src="editor.js"></script>
</body>
</html>

En lo anterior, hemos agregado contentEditable asignar a la div elemento para que sea editable en el navegador.

JavaScript

crear un nuevo archivo llamado editor.js y agregue el código a continuación.


const first = document.querySelector(".first");
const iframe = document.querySelector("iframe");
const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  var html = first.textContent;
  iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
});


first.addEventListener('keyup',()=>{
  var html = first.textContent;
  iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
})

first.addEventListener("paste", function(e) {
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertText", false, text);
    });

codigo css

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}


.btn {
  poistion:fixed;
  right:0;
   padding: 0.4rem;
  width: 4rem;
  background: rgb(0, 0, 0);
  color: gold;
  font-size: 1rem;
  outline:none;
  cursor:pointer;
   height:90vh;
}
.btn:hover{
   color:white;
   background: blue;
}


.main-editor {
  background: rgba(0, 0, 0, 0.91);
  display: flex;
  width: 100%;
  padding: 1rem;
  box-shadow:0 2px 3px black;
  position:fixed;
  height:100vh;
   justify-content: center;
    align-items: center;
  border: 7px solid #36383f;
}

.first {
  background-color: #ffffff;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre;
  box-shadow: 0 1px 1px rgb(22, 22, 22);
  outline: none;
  padding: 0.4rem;
  height: 90vh;
}

.second {
  background-color: rgb(255, 255, 255);
  width: 50%;
  overflow-y: auto;
  white-space: pre;
  right: 0;
  box-shadow: 0 1px 1px rgb(22, 22, 22);
  padding: 0.4rem;
  height: 90vh;
}

Demostración de Codepen

Esta es una demostración del editor HTML en vivo.

Si quieres conocer otros artículos parecidos a Cómo crear su propio editor Html en vivo como W3schools puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas