PC

Integrar editor personalizado sin tocar html

24 agosto, 2025
Pedromo

Cómo integrar un editor personalizado en WordPress sin tocar el HTML original

Después de probar varias soluciones, he conseguido implementar un editor personalizado en WordPress que se abre desde un botón y aparece en una ventana modal con animación. Lo mejor: no he tenido que modificar el HTML original de la página, lo que lo hace ideal para mantener la estructura intacta y evitar complicaciones con el diseño.

¿Qué incluye esta solución?

  • Un botón elegante que lanza el editor.
  • Una ventana modal con animación suave.
  • Un editor de texto funcional y limpio.
  • Todo integrado mediante JavaScript y CSS, sin alterar el contenido base.

¿Por qué es útil?

Esta solución es perfecta para quienes quieren añadir funcionalidades interactivas sin romper el diseño original. Además, es fácil de replicar en otras páginas o entradas del sitio.

¿Quieres implementarlo tú también?

Si te interesa el código o necesitas ayuda para adaptarlo a tu sitio, puedes escribirme o dejar un comentario. ¡Encantado de compartirlo!

¿Quieres que le añada el código directamente o prefieres dejarlo como una introducción para luego ampliarlo? También puedo ayudarte a preparar una versión más técnica si lo vas a compartir con desarrolladores.

Añade el código directamente

Perfecto, Pedro. Aquí tienes la entrada completa lista para publicar en tu blog, con el código incluido. Todo está organizado para que sea fácil de entender y replicar:

Cómo integrar un editor personalizado en WordPress sin tocar el HTML original

Después de probar varias soluciones, he conseguido implementar un editor personalizado en WordPress que se abre desde un botón y aparece en una ventana modal con animación. Lo mejor: no he tenido que modificar el HTML original de la página, lo que lo hace ideal para mantener la estructura intacta y evitar complicaciones con el diseño.

¿Qué incluye esta solución?

  • Un botón elegante que lanza el editor.
  • Una ventana modal con animación suave.
  • Un editor de texto funcional y limpio.
  • Todo integrado mediante JavaScript y CSS, sin alterar el contenido base.

🧩 Código completo

1. HTML (puedes insertarlo en un bloque HTML personalizado en WordPress)

html

<button id="openEditor">Abrir editor</button>

<div id="editorModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <textarea id="customEditor" rows="10" cols="50">Escribe aquí...</textarea>
  </div>
</div>

2. CSS (puedes añadirlo en el personalizador de WordPress o en tu archivo de estilos)

css

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
  animation: fadeIn 0.3s ease-in-out;
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 600px;
  animation: slideDown 0.4s ease;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes slideDown {
  from {transform: translateY(-50px);}
  to {transform: translateY(0);}
}

3. JavaScript (puedes insertarlo en un bloque de código o usar un plugin como “Insert Headers and Footers”)

javascript

document.addEventListener("DOMContentLoaded", function () {
  const modal = document.getElementById("editorModal");
  const btn = document.getElementById("openEditor");
  const span = document.querySelector(".close");

  btn.onclick = function () {
    modal.style.display = "block";
  };

  span.onclick = function () {
    modal.style.display = "none";
  };

  window.onclick = function (event) {
    if (event.target === modal) {
      modal.style.display = "none";
    }
  };
});

¿Por qué es útil?

Esta solución es perfecta para quienes quieren añadir funcionalidades interactivas sin romper el diseño original. Además, es fácil de replicar en otras páginas o entradas del sitio.

Si te interesa adaptarlo o añadir funciones como guardar el contenido, exportar a PDF o integrarlo con la biblioteca de WordPress, ¡no dudes en escribirme!