Editor de rebajas WYSIWYG con todas las funciones-TUI. Editor

Vista prévia

Descripción

Esta es la versión de JavaScript de la TUI. Editor que facilita la incorporación de un potente, extensible, completo con funciones, Editor de Markdown WYSIWYG en varios idiomas en su aplicación Web.

Más características

• < a href = "http:/commonmark.org/" target = "_ blank" rel = "noopener" > CommonMark y < a href = "https://github.github.com/gfm/" target = "_ blank" rel = "noopener" > GitHub con sabor a las especificaciones de Markdown .
• Extensiones útiles: selector de color, gráfico, UML, combinación de tablas.
• Fácil de crear sus propias extensiones.
• Simple & modos WYSIWYG.
• Previsualización de HTML en directo con soporte de desplazamiento sincrónico.
• Resaltado de sintaxis.
• Permite establecer el contenido mediante programación.

Installation & Download

# NPM
$ npm install tui-editor --save

Uso básico

Incluya los archivos de TUI. Editor en la Página Web.

<link rel="stylesheet" href="dist/tui-editor.css">
<link rel="stylesheet" href="dist/tui-editor-contents.css">
<script src="dist/tui-editor-Editor.js"></script>

Cree un elemento de marcador de posición para el editor de Markdown WYSIWYG.

<div id="example"></div>

Crea un nuevo editor de rebajas WYSIWYG y listo.

var editor = new Editor({


el: document.querySelector('#example')
});

Todas las opciones posibles & funciones para personalizar el editor de rebajas WYSIWYG.

• height : valor del estilo de altura del editor. La altura se aplica como border-Box ex) ' 300px ', ' 100% ', ' auto '
• minHeight : valor de estilo de min-height del editor en pixel ex ' 300px '
• initialValue : el valor inicial del editor
• previewStyle : estilo de vista previa del editor Markdown (Tab, vertical)
• initialEditType : tipo de editor inicial (Markdown, WYSIWYG)
• Events : lista de sucesos EventList
• Events. Load : se emitirá cuando el editor cargue completamente
• Events. Change : se emitirá cuando el contenido cambie
• Events. stateChange : se emitirá cuando cambie el formato por la posición del cursor
• Events. Focus : se emitirá cuando el editor obtenga el foco
• Events. Blur : se emitirá cuando el editor pierda el foco
• hooks : lista de ganchos
• hooks. previewBeforeHook : enviar vista previa para enlazar URL antes de que se muestre la vista previa
• hooks. addImageBlobHook : gancho para carga de imagen.
• idioma : idioma
• useCommandShortcut : Si utiliza métodos abreviados de teclado para realizar comandos
• useDefaultHTMLSanitizer : Use htmlSanitizer predeterminado
• codeBlockLanguages : lenguajes de bloque de código admitidos que se enumeren. valor predeterminado es lo que Highlight. js admite
• usageStatistics : enviar nombre de host a Google Analytics
• toolbarItems : elementos de la barra de herramientas.
• hideModeSwitch : ocultar barra de pestañas del conmutador de modo

var editor = new Editor({


previewStyle: 'tab',


initialEditType: 'markdown',


height: '300px',


minHeight: '200px',


language: 'en_US',


useDefaultHTMLSanitizer: true,


useCommandShortcut: true,


codeBlockLanguages: _codeBlockManager.CodeBlockManager.getHighlightJSLanguages(),


usageStatistics: true,


toolbarItems: ['heading', 'bold', 'italic', 'strike', 'divider', 'hr', 'quote', 'divider', 'ul', 'ol', 'task', 'indent', 'outdent', 'divider', 'table', 'image', 'link', 'divider', 'code', 'codeblock'],


hideModeSwitch: false
});

Registro de cambios

12/20/2018

• v1.2.9: bugfix

11/14/2018

• arreglo: fusionar/Desfusionar celda en el menú contextual
• arreglo: el cursor es incorrecto después del comando blockquote exec