Editor de texto enriquecido en línea de estilo mediano-editor medio
| Autor: | yabwe |
|---|---|
| Views Total: | 4,172 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 12, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Medium editor es una biblioteca de JavaScript independiente para crear una barra de editor de texto flotante que aparece cuando seleccionas un fragmento de texto de tu página. Inspirado por la genialidad de Medium.com.
See also:
- biblioteca de uso compartido de la selección de texto de estilo mediano â & #128; & #147; Share-Esta
- efecto de carga de imagen de estilo medio
- zoom de imagen como medio en JavaScript puro â & #128; & #147; zoom. js
- responsive Medium.com inspirado Galería & diseño
Funcionamiento
El estilo predeterminado de Medium Editor utiliza FontAwesome para dibujar los iconos en la burbuja de contexto.
<link rel="stylesheet" href="font-awesome.css">
Incluya el Medium-editor. CSS requerido y un CSS de tema para su elección en el encabezado.
<link rel="stylesheet" href="/dist/css/medium-editor.css"> <link rel="stylesheet" href="/dist/css/themes/default.css">
Envuelva el texto que desea hacer editable en un contenedor.
<div class="editable"> Your content goes here </div>
Incluya el Medium-editor. js en la parte inferior de la página.
<script src="/dist/js/medium-editor.js"></script>
El JavaScript para habilitar el editor.
var editor = new MediumEditor('.editable', {
buttonLabels: 'fontawesome'
}); Opciones disponibles para personalizar el editor.
var editor = new MediumEditor('.editable', {
// active class
activeButtonClass: 'medium-editor-button-active',
// shows fontawesome icons
buttonLabels: false,
// time to wait before showing the editor
delay: 0,
// disables return key
disableReturn: false,
disableDoubleReturn: false,
// disables two (or more) empty new lines
disableExtraSpaces: false,
// disables adding the contenteditable behavior
disableEditing: false,
// auto linkify links
autoLink: false,
// container element
elementsContainer: false,
// content window
contentWindow: window,
// root element
ownerDocument: document,
// uses target=_blank attribute
targetBlank: false,
// enables extensions
// https://github.com/yabwe/medium-editor/tree/master/src/js/extensions
extensions: {},
// enables spell check
spellcheck: true
}); Todas las opciones predeterminadas para la barra de herramientas.
var editor = new MediumEditor('.editable', {
toolbar: {
/* align: ['left'|'center'|'right']
* When the __static__ option is true, this aligns the static toolbar
* relative to the medium-editor element.
*/
align: 'center',
/* allowMultiParagraphSelection: [boolean]
* enables/disables whether the toolbar should be displayed when
* selecting multiple paragraphs/block elements
*/
allowMultiParagraphSelection: true,
/* buttons: [Array]
* the names of the set of buttons to display on the toolbar.
*/
buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'],
/* diffLeft: [Number]
* value in pixels to be added to the X axis positioning of the toolbar.
*/
diffLeft: 0,
/* diffTop: [Number]
* value in pixels to be added to the Y axis positioning of the toolbar.
*/
diffTop: -10,
/* firstButtonClass: [string]
* CSS class added to the first button in the toolbar.
*/
firstButtonClass: 'medium-editor-button-first',
/* lastButtonClass: [string]
* CSS class added to the last button in the toolbar.
*/
lastButtonClass: 'medium-editor-button-last',
/* standardizeSelectionStart: [boolean]
* enables/disables standardizing how the beginning of a range is decided
* between browsers whenever the selected text is analyzed for updating toolbar buttons status.
*/
standardizeSelectionStart: false,
/* static: [boolean]
* enable/disable the toolbar always displaying in the same location
* relative to the medium-editor element.
*/
static: false,
/* sticky: [boolean]
* When the __static__ option is true, this enables/disables the toolbar
* "sticking" to the viewport and staying visible on the screen while
* the page scrolls.
*/
sticky: false,
/* stickyTopOffset: [Number]
* Value in pixel of the top offset above the toolbar
*/
stickyTopOffset: 0,
/* updateOnEmptySelection: [boolean]
* When the __static__ option is true, this enables/disables updating
* the state of the toolbar buttons even when the selection is collapsed
* (there is no selection, just a cursor).
*/
updateOnEmptySelection: false,
/* relativeContainer: [node]
* appending the toolbar to a given node instead of body
*/
relativeContainer: null
}
}); Registro de cambios
v5.23.3 (06/12/2018)
- Fix medio-editor-Insert plugin CSS correcciones en el tema de Beagle
- Actualice los enlaces de jsDelivr
- Corregir la advertencia de la consola Firefox
- No Compruebe solo los destinos nulos o se producirá un error cuando no esté definido.
- Fix Crash cuando ' Extensions ' en ' isElementDescendantOfExtension '
- Fix Jasmine Unit Test
- Corregir error nulo en pastedPlain. Split
- Corregir las pruebas del navegador rotos
