Ligero editor de texto potente con JavaScript

Vista prévia

Descripción

Este es un editor de texto ligero pero potente y extensible escrito en JavaScript puro.

Características

• Plugins de Markdown, Textile y BBCode.
• Internacionalización
• Maximizar/minimizar
• Selector de cuadrícula de tabla
• Convertidores de cadenas comunes
• Native Emoji
• Bubble Tools
• Editor Grow
• Autocompletar
• Contador de palabras
• Vista previa HTML
• Panel de ayuda
• Buscar y reemplazar
• Caracteres especiales

Keyboard Shortcuts

• â & #140; & #152; + y â & #134; & #146; Redo
• â & #140; & #152; + z â & #134; & #146; deshacer
• â & #140; ¥ + F10 â & #134; & #146; herramientas de enfoque. Céntrese en el primer elemento de herramienta de la barra de herramientas. Utilice las teclas de flecha para desplazarse entre las herramientas.
• â & #142; & #139; â & #134; & #146; enfoque de liberación. Suelte el foco del editor centrándose en el siguiente elemento enfocable.
• â & #135; ¥ â & #134; & #146; sangría
• â & #135; § + â & #135; ¥ â & #134; & #146; Outdent

¿Cómo funciona?

Cargue los siguientes archivos JavaScript y CSS en el documento HTML.

<link href="text-editor/ui.min.css" rel="stylesheet">
<link href="text-editor/ui.i.min.css" rel="stylesheet">
<script src="text-editor.min.js"></script>
<script src="text-editor/ui.min.js"></script>
<script src="text-editor/ui/h-t-m-l.min.js"></script>

Cargue un complemento de su elección en el documento.

<!-- BBCode plugin -->
<script src="text-editor/ui/b-b-code.min.js"></script>

<!-- Markdown plugin -->
<script src="text-editor/ui/markdown.min.js"></script>

<!-- Textile plugin -->
<script src="text-editor/ui/textile.min.js"></script>

Cree un elemento TEXTAREA normal para el editor de texto.

<textarea id="editor"></textarea>

Cree un nuevo editor de texto desde el elemento TEXTAREA.

var editor = TE.ui.HTML(document.querySelector('#editor'));

Opciones posibles para personalizar el editor de texto.

var editor = TE.ui.HTML(document.querySelector('#editor'),{



// custom indent characte


tab: '
',



// or 'dir'


direction: 'ltr',



// directory path of text-editor.min.js file


path: TE.path,



// enable/disable text area resize handler


resize: true,



// enable/disable keyboard shortcut feature.


keys: true,



// list of tools to be included to the tools bar, each of them separated by a space.


tools: 'indent outdent | undo redo',



// extra HTML attributes to be added to the text area element


attributes: {



'spellcheck': 'false'


},





// auto tab


auto_tab: true,



// auto close the following markups


auto_close: {




'"': '"',




"'": "'",




'(': ')',




'{': '}',




'[': ']',




'<': '>'


},



// localization


languages: {



tools: {




tools: ['Focus Tools', _u2325 + '+F10'],




undo: ['Undo', _u2318 + '+Z'],




redo: ['Redo', _u2318 + '+Y'],




indent: ['Indent',
_u21E5],




outdent: ['Outdent',
_u21E7 + '+' + _u21E5]



},



buttons: {




okay: 'OK',




cancel: 'Cancel',




yes: 'Yes',




no: 'No',




enter: 'Enter',




exit: 'Exit',




open: 'Open',




close: 'Close',




ignore: 'Ignore'



},



placeholders: {




"": 'text here' + _u2026



},



labels: {},



others: {}


},



// default classes


classes: {



"": 'text-editor',



i: 'text-editor-i text-editor-i-%1 text-editor-i-%2'


}



});

Registro de cambios

09/15/2018

• Refactorizar