DivEditor crea un editor de elementos de bloque <div>. Dentro del editor, le puedes aplicar diferentes estilos, y luego copiar el código y ponerlo en una plantilla o artículo para mejorar el diseño.

Installation

Usage

Añade el código <div id="Editor"></div> a la página y el editor aparecerá allí.

Modo de vista

Vista es la sección donde puedes visualizar cómo se verá el diseño. En el área derecha, hay opciones que se agregarán al contenedor <div>. Puedes usar el botón Limpiar para eliminar el código y comenzar de nuevo, o usar el botón Aplicar para aplicar el contenido de las secciones Estilos y Atributos:

Estilos

Define el código inline-CSS (CSS lineal) que se añadirá al contenedor <div>.

• Texto: Esta sección añade y modifica texto dentro del contenedor (ejemplo: <div>Texto aquí</div>)
  • Valor: Define el texto dentro del contenedor.
  • Color: Define el color del texto.
  • Fuente: Define la fuente del texto.
  • Tamaño: Define el tamaño de la fuente.
  • Estilo: Define el estilo de la fuente.
  • Peso: Define el peso de la fuente.
  • Caso: Define el caso del texto.
  • Decoración: Define la decoración del texto.
  • Alineación: Define la alineación del texto.
• Ancho: Este campo define el ancho del contenedor.
• Altura: Este campo define la altura del contenedor.
• Margen: Este campo define el margen alrededor del contenedor.
• Relleno: Este campo define el relleno del contenedor.
• Fondo: Este campo define el fondo del contenedor. Usado usualmente para color de fondo.
• Posición: Este campo define el atributo de posición del contenedor.
• Bordes: Esta sección es para añadir un borde alrededor del contenedor.
  • Ancho: Define el ancho del borde.
  • Estilo: Define el estilo del borde.
  • Color: Define el color del borde.
  • Radio: Define el radio del borde.
• Sombra: Este campo añade una sombra alrededor del contenedor.
• Sombra de texto: Este campo define una sombra para el texto.
• Opacidad: Este campo define la opacidad del contenedor.
• Transformar: Esta sección define las propiedades de transformación del contenedor.
  • Rotación: Define una rotación.
  • Escala-X: Define escala en el eje X.
  • Escala-Y: Define escala en el eje Y.
  • Oblicuidad-X: Define oblicuidad en el eje X.
  • Oblicuidad-Y: Define oblicuidad en el eje Y.
  • Translación-X: Define translación en el eje X.
  • Translación-Y: Define translación en el eje Y.
  • Origen-X: Define origen en el eje X.
  • Origen-Y: Define origen en el eje Y.
• Desborde: Este campo define desborde para el contenedor.

Atributos

Define las clases o IDs de CSS que se añadirán al contenedor <div>.

• Clases: Este campo clases para el contenedor.
• ID: Este campo define una ID para el contenedor.

Modo de código

Código es la sección donde puedes visualizar el código en su forma de HTML/wikitexto. Desde aquí, puedes usar el botón Copiar para copiar el código, y tienes también botones para aumentar el tamaño de fuente para facilitar la lectura.

Demo