Cómo agregar estilos a TinyMCE y al contenido de Markdown
Muchos escritores prefieren trabajando en Markdown Porque es un lenguaje más simple con menos obstáculos para escalar. Por supuesto, está lejos de ser perfecto, pero ofrece una vista más limpia de tu texto con la facilidad de exportando a HTML.
Desafortunadamente, los estilos de Markdown predeterminados suelen ser bastante aburridos. Pero con el biblioteca wysiwyg.css, usted puede tener un documento vibrante al instante.
Esta biblioteca gratuita de CSS transforma todo su contenido básico de TinyMCE o Markdown en Bloques de HTML formateados y fáciles de leer..
No necesita conocer ningún HTML / CSS complejo para usar este complemento. Simplemente envolver el contenido generado en un div con la clase .wysiwyg
, y ya está todo listo.
La verdadera dificultad es crear una aplicación que automatice este proceso o agregar esta biblioteca al backend para un panel de administración de usuarios.
Sin embargo, las posibilidades son infinitas, e incluso podrías usar esto. para el trabajo de escritura local Si prefieres exportar tu contenido. de Markdown a HTML.
Por defecto, esta biblioteca CSS tiene soporte para cada etiqueta HTML importante imaginable. Esto incluye todos los encabezados, listas, enlaces, etiquetas de pre / código, figuras e incluso etiquetas semi-oscuras como y
. Hay una Lista llena en el repositorio de GitHub si quieres comprobarlo.
Si define sus propios estilos tipográficos, estos pueden incluso reescribe la configuración por defecto en la hoja de estilo. Para que pueda obtener todos los beneficios de wysiwyg.css mezclado con sus propias opciones de fuente.
La biblioteca tampoco podría ser más fácil de configurar. Sólo descargar una copia localmente o tirar directamente utilizando npm instalar wysiwyg.css
A partir de ahí, solo incluir el archivo CSS en su cabeza de documento, y deje que se ejecute. Sólo apuntará a los contenidos. dentro de un contenedor con la clase .wysiwyg
, por lo que esta clase debe envolver cualquier contenedor que desee.
La biblioteca sigue siendo actualizado con frecuencia, así que puedes encontrar actualizaciones recientes En el repositorio principal de GitHub. Y si tiene sugerencias o ideas para nuevas actualizaciones, no dude en compartirlas con el creador Jeremy Thomas en su página de Twitter @jgthms.