tui.editor

Editor de Markdown y Wysiwyg de GFM - productivo y extensible

Tabla de contenido

• Paquetes
• ¿Por qué Toast UI Editor?
• Características
• Ejemplos
• Soporte del navegador
• Pasos de solicitud de retiro
• Que contribuye
• Toast UI Family
• Utilizado por
• Licencia

? Paquetes

Editor de ui tostado

Nombre	Descripción
@toast-ui/editor	Componente JavaScript simple

Envoltorios del editor de la interfaz de usuario de Toast

Nombre	Descripción
@toast-ui/react-editor	Componente de envoltura react
@toast-ui/vue-editor	Componente de envoltura vue

Complementos del editor de la interfaz de usuario de Toast

Nombre	Descripción
@toast-ui/editor-plugin-chart	Complemento para representar la tabla
@toast-ui/editor-plugin-code-syntax-highlight	Complemento para resaltar la sintaxis del código
@toast-ui/editor-plugin-color-syntax	Texto de edición de complemento a color
@toast-ui/editor-plugin-table-merged-cell	Complemento para fusionar columnas de tabla
@toast-ui/editor-plugin-uml	Complemento para renderizar UML

? ¿Por qué Toast UI Editor?

El editor de UI Toast proporciona el modo Markdown y el modo Wysiwyg . Dependiendo del tipo de uso que desee, como la producción de Markdown o tal vez para editar el Markdown . El editor de la interfaz de usuario de Toast puede ser útil tanto para el uso. Ofrece el modo Markdown y el modo Wysiwyg , que se puede cambiar cualquier punto en el tiempo.

Modo de cambio productivo

Especificaciones de CommonMark + GFM

Hoy Commonmark es el estándar de markdown de facto. GFM (Markdown con sabor a GitHub) es otra especificación popular basada en CommonMark , mantenida por GitHub , que es la reducción principalmente utilizada. El editor de la interfaz de usuario de Toast sigue las especificaciones de CommonMark y GFM . Escriba documentos con facilidad utilizando herramientas productivas proporcionadas por Toast UI Editor y puede abrir fácilmente el documento producido donde sea que se admitan las especificaciones.

• Vista previa en vivo : edite Markdown mientras vigila el HTML renderizado. Sus ediciones se aplicarán de inmediato.
• Sincronización de desplazamiento : desplazamiento sincrónico entre Markdown y Vista previa. No necesita desplazarse por cada uno por separado.
• Destacado de sintaxis : puede verificar la sintaxis de Markdown roto de inmediato.

Modo Wysiwyg fácil

• Tabla : a través del menú contextual de la tabla, puede agregar o eliminar columnas o filas de la tabla, y también puede organizar el texto en las celdas.
• Editor de bloques personalizados : el área de bloque personalizada se puede editar a través del editor interno.
• Copiar y pegar : pegar cualquier cosa del navegador, captura de pantalla, Excel, PowerPoint, etc.

Ui

• Barra de herramientas : a través de la barra de herramientas, puede diseñar o agregar elementos al documento que está editando.

• Tema oscuro : puedes usar el tema oscuro.

Uso de varias funciones extendidas - complementos

Commonmark y GFM son geniales, pero a menudo necesitamos más abstracción. El editor de la interfaz de usuario de Toast viene con poderosos complementos de conformidad con la sintaxis de Markdown.

Se proporcionan cinco complementos básicos de la siguiente manera, y se pueden descargar y usar con NPM.

• chart : un bloque de código marcado como un 'gráfico' hará una tabla de UI de tostadas.
• code-syntax-highlight : resalte el área de bloque de código correspondiente al lenguaje proporcionado por Prism.js.
• color-syntax : con Toast UI Colorpicker, puede cambiar el color del texto de edición con la GUI.
• table-merged-cell : puede fusionar columnas del encabezado de la tabla y el área del cuerpo.
• uml : Un bloque de código marcado como un 'UML' hará diagramas UML.

? Características

• Visor: admite un modo para mostrar solo datos de Markdown sin un área de edición.
• Internacionalización (i18n): apoya inglés, holandés, coreano, japonés, chino, español, alemán, ruso, francés, ucraniano, turco, finlandés, checo, árabe, polaco, galicán, sueco, italiano, noruega, croata + idioma y puede extender.
• Widget: esta característica le permite configurar las reglas que reemplazan la coincidencia de la cadena con un RegExp específico con el nodo del widget.
• Bloque personalizado: los nodos no admitidos por Markdown se pueden definir a través del bloque personalizado. Puede mostrar el nodo lo que desea mediante la redacción de la lógica de análisis con el bloque personalizado.

? Ejemplos

• Básico
• Espectador
• Usando todos los complementos
• Creando el complemento del usuario
• Personalización de los botones Toobar
• Internacionalización (i18n)

¡Aquí hay más ejemplos y juega con Toast UI Editor!

? Soporte del navegador

Cromo	Explorador de Internet	Borde	Safari	Firefox
Sí	11+	Sí	Sí	Sí

? Pasos de solicitud de retiro

Los productos Toast UI son de código abierto, por lo que puede crear una solicitud de extracción (PR) después de solucionar problemas. Ejecute los scripts de NPM y desarrolle el siguiente proceso.

Configuración

Bifurca la rama main en su repositorio personal. Clonarlo a la computadora local. Instalar módulos de nodo. Antes de comenzar el desarrollo, debe verificar si hay algún error.

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor

Toast UI Editor utiliza NPM Workspace, por lo que debe establecer el entorno basado en NPM7. Si se usa la subversión, las dependencias deben instalarse moviendo rutas directas por paquete.

Desarrollar

Puede ver su código reflejado tan pronto como guarde el código ejecutando un servidor. No se pierda agregar casos de prueba y luego hacer derechos verdes.

Ejecutar la capa de nieve-servidor

Snowpack le permite ejecutar un servidor de desarrollo sin agruparse.

$ npm run serve editor

Ejecutar webpack-dev-server

Si se requieren pruebas de navegadores heredados, el servidor de desarrollo aún se puede ejecutar utilizando un paquete web.

$ npm run serve:ie editor

Prueba de ejecución

$ npm test editor

Solicitud de solicitud

Antes de cargar su PR, ejecute la prueba por última vez para verificar si hay algún error. Si no tiene errores, comprométase y luego presione!

Para obtener más información sobre los pasos de relaciones públicas, consulte los enlaces en la sección contribuyente.

Que contribuye

• Código de conducta
• Guía contribuyente
• Convención de compromiso
• Emitir pautas

? Toast UI Family

• Calendario de tostadas de interfaz de usuario
• Toast UI Chart
• Toast Ui Grid
• Editor de imágenes de UI Toast
• Componentes de la interfaz de usuario de tostadas

Utilizado por

• Nhn dooray! - Servicio de colaboración (proyecto, mensajero, correo, calendario, unidad, wiki, contactos)
• Unotes - Extensión del código de Visual Studio

Licencia

Este software tiene licencia bajo el MIT © NHN Cloud.