¡Tu navegador no tiene JavaScript! habilitado. or favor habilítalo para tener una mejor experiencia con PipolNews
Ultimos

Trabajando con el editor de Pipol

Pipol News está basado en Ghost, un gestor de contenidos de código abierto, el cual usa el Editor Koenig como herramienta de creación de contenidos.

A continuación vamos a describir de forma rápida, como usar el editor Koening.

Para resumir el concepto subyacente de Koenig, es mejor pensar que tiene dos tipos de contenido: texto enriquecido y tarjetas. El texto enriquecido cubre todo el contenido de texto, como encabezados, párrafos, listas y formato general. Intercalado dentro de texto enriquecido está lo que llamamos "tarjetas". Las tarjetas representan contenido que no es de texto (imágenes, contenido embebido, separadores, etc.) o contenedores para otros formatos, como Código, Notación de Marcado (Markdown) o HTML.

¡Pero! No te preocupes, Markdown no se va completamente. Sabemos que todo el mundo está acostumbrado a escribir en Markdown (¡y muchas personas realmente lo aman!), Así que queríamos unir las mejores partes de Markdown y los editores WYSIWYG tradicionales utilizando el formato Markdown como accesos directos para realizar operaciones de edición.

Vamos entonces, a la lista de características : smile :. Por favor, lee para tener una idea de lo que  se puede hacer con Koenig. Es un poco largo, pero Koenig todavía está en beta.


Al igual que otros editores WYSIWYG, las operaciones básicas de formateo se pueden realizar a través de una barra de herramientas. Seleccione el texto que desea formatear y haga clic para aplicar el formato deseado; con suerte, todo se explica por sí mismo: sonrisa: una cosa a tener en cuenta es que si usa el teclado para seleccionar texto, no verá la barra de herramientas hasta que se mueva el mouse, queremos que la UI se mantenga fuera del camino tanto como sea posible.

Los enlaces se pueden crear a través de la barra de herramientas de enlace secundario / entrada de url. Si tiene un enlace en su contenido, desplácese sobre él para obtener una versión clicable junto con un botón de edición para recuperar la entrada de la url.

Muchos de los formatos, así como algunos otros también se pueden aplicar a través de atajos de teclado:

  • ⌘/Ctrl+B habilita la negrita
  • ⌘/Ctrl+I habilita énfasis
  • ⌘/Ctrl+U habilita subrayado
  • ⌘/Ctrl+K habilita hipervínculos
  • Shift+Enter inserta un salto de carro suave <br>

Markdown Avanzado

Queremos que Koenig se sienta como una evolución natural del Markdown, de modo que pueda usar el Markdown típico para crear secciones, tarjetas y aplicar formato.

Las siguientes expansiones de sección solo funcionan cuando se escribe al principio de un párrafo en blanco y se activan tan pronto como se escribe el espacio final:

  • #, ##, y en adelante se usan para crear nuevos encabezados de sección nivel de encabezado, títulos 1, 2, 3, etc.  
  • > crea una cita
  • - or *  crea listas no numeradas
  • 1. crea listas numeradas

El formateo de texto avanzado se activará tan pronto como se escriba el carácter final, no se necesita espacio final:

  • *...* or _..._ = formatear en itálica
  • **...** = formater en negrita
  • [example](https://example.com/) = crear hipervínculos

También hay dos formatos especiales que se activan de la misma manera que el formateo avanzado de texto, pero luego se editan de forma diferente:

  • ~~strike~~ = texto tachado
  • `test` = escribir código

La diferencia para estos dos últimos formatos es cómo editarlos. Si coloca el cursor al final del texto formateado y presiona Retroceder, el uso de formateo avanzado se deshará para que puedas agregar más texto antes de completar nuevamente el marcado avanzado.

Finalmente, tenemos marcado avanzado de tarjetas, que se activan cuando se escriben como lo siguiente en un párrafo en blanco:

  • ``` crea una tarjeta de código
  • --- crea una tarjeta de divisor de página
  • ![alt text](http://example.com/image.png) crea una tarjeta de imagen usando los atributos alt y src

Tarjetas

En Koenig es posible agregar bloques de contenido dinámico y extensible a las publicaciones, que van más allá del texto simple. Llamamos a estos bloques "Tarjetas". Por el momento, las siguientes tarjetas están disponibles en Koenig:

Algunas tarjetas como Markdown, HTML y Código tendrán un modo de "edición" y estarán en este modo cuando se inserten por primera vez; se puede salir de este modo presionando Escape o haciendo clic para colocar el cursor fuera de la tarjeta. Para volver al modo de edición, puede hacer doble clic en una tarjeta, o seleccionarla moviendo el cursor con el teclado y luego presionando ⌘ / Ctrl + Enter.

También hay un acceso directo de inserción de tarjeta accesible escribiendo / al comienzo de un párrafo en blanco. Se puede seguir escribiendo para filtrar la lista y luego presionar Enter para insertar la tarjeta.

Tarjeta de Markdown

Para aquellos de ustedes que están acostumbrados a usar Markdown por completo, el editor de Markdown predeterminado que se lanzó con Ghost 1.0. Ahora está disponible como una tarjeta dentro de Koenig.

Todas las publicaciones anteriores hechas con Markdown ya están actualizadas a Koenig, solo que están formadas por una sola tarjeta de Markdown. Abre una de tus publicaciones existentes y verás lo que queremos decir.

Tarjetas de imagen

Podes cargar imágenes usando la tarjeta de imagen (¡sorpresa!). También sabemos con qué frecuencia los subtítulos de las imágenes han sido una característica solicitada en Ghost, por lo que nos complace poder decir que la tarjeta de imagen tiene una función de subtítulos incorporada. Y eso no es todo, también se puede elegir entre tres opciones de ancho de imagen: normal, amplia y completa.

HTML

Las tarjetas HTML le permiten agregar código HTML personalizado a sus publicaciones en caso de que tenga un HTML específico, como una galería de imágenes o un marcado de texto destacado.

Esto es sumamente útil si tenés que embeber videos de YouTube, tarjetas de Twitter o similares mediante el uso de la opción de "inserción" completa del servicio y copiar / pegar el HTML. Mejoraremos el soporte de inserción con una tarjeta.

Otras características

Pegar HTML

¿Tenés algún texto en formato Markdown que deseás formatear rápidamente en Koenig?

¡No hay problema! Cualquier texto pegado en Koenig se ejecuta a través del analizador de Markdown de Ghost para que Koenig pueda tratarlo igual que un pegado de texto enriquecido lo que significa que obtendrá encabezados y texto muy bien formateados, tarjetas de imagen, etc., que se crearán automáticamente.

Pegado de texto enriquecido

Si copia contenido de una fuente externa, como una página web o incluso documentos de Google, al pegarlo en Koenig debería conservar el formato tanto como sea posible. Los encabezados y el formato de texto básico se copiarán y las tarjetas se deben crear automáticamente para cualquier contenido compatible, como imágenes.

Sin embargo, esto está aun en un proceso continuo para resolver cualquier problema.

Próximamente

  • Integración de Unsplash - Seleccione Imágenes Unsplash en las tarjetas.
  • Pegar archivos de imagen: copie y pegue los archivos de imagen en Koenig para crear automáticamente tarjetas de imagen y subir sus imágenes
  • Tarjeta incrustada: incrustación sencilla de videos de YouTube, tarjetas de Twitter, tarjetas de Facebook, muchos más, simplemente pegando la url respectiva.

Si tenés más dudas, escribinos a hola@pipol.news

Author image
Los que hacen el backend de Pipol News. https://ghost.org/es/