Editor WYSIWYG minimalista en JavaScript puro-Suneditor

Vista prévia

Descripción

Suneditor es un editor de texto WYSIWYG de JavaScript ligero, flexible, personalizable y puro para sus aplicaciones Web.

Funcionamiento

Cargue el suneditor. CSS y el suneditor. js necesarios en el documento HTML.

<link href="suneditor/css/suneditor.css" rel="stylesheet">
<script src="suneditor/js/suneditor.js"></script>

Cree un elemento TEXTAREA normal para el editor WYSIWYG.

<textarea id="editor">Hello World!</textarea>

Cree un nuevo editor desde el elemento TEXTAREA. Hecho.

SUNEDITOR.create('editor');

Todas las opciones predeterminadas para personalizar el editor WYSIWYG.

SUNEDITOR.create('editor', {


// plugins to load

plugins: [


font,


fontSize,


formatBlock,


fontColor,


hiliteColor,


align,


horizontalRule,


list,


table,


link,


image,


video

]


 // language object

lang: {},


// Sets to -1 or false or null to turn off

// Sticky Toolbar

// Default: 0px (offset)

stickyToolbar: 0,


// Shows the bottom resizing bar.

resizingBar: true,


// Font Family array

font: null,


// Font Size array

fontSize: null,


// width/heigh of the video

videoWidth: 560,

videoHeight: 315,


// the query string of a YouTube embedded URL.

 youtubeQuery: '',


// image file input

imageFileInput: undefined,


// image url input

imageUrlInput: undefined,


// image size

imageSize: '350px',


// image upload url

imageUploadUrl: null,


// height/width of the editor

height: '',

width: '',


// min height/width of the editor

minHeight: null,

minWidth: null,


// Default color array of color picker

colorList: null,


// Displays the current node structure to resizingBar

showPathLabel: true,


// Size of background area when activating dialog window

popupDisplay: ''


// show/hide toolbar icons

buttonList: [


['undo', 'redo'],


['font', 'fontSize', 'formats'],


['bold', 'underline', 'italic', 'strike', 'removeFormat'],


['fontColor', 'hiliteColor'],


['indent', 'outdent'],


['align', 'line', 'list', 'table'],


['link', 'image', 'video'],


['fullScreen', 'codeView'],


['preview', 'print']

]


})

Métodos de la API:

var suneditor = SUNEDITOR.create('Editor');

// Copies the contents of the suneditor into a [textarea]
suneditor.save();

// Gets the suneditor's context object. Contains settings, plugins, and cached element objects
suneditor.getContext();

// Gets the contents of the suneditor
suneditor.getContents();

// Inserts an HTML element or HTML string or plain string at the current cursor position
suneditor.insertHTML('<img src="http://suneditor.com/sample/img/sunset.jpg">');

// Change the contents of the suneditor
suneditor.setContents('set contents');

// Add content to the suneditor
suneditor.appendContents('append contents');

// Disable the suneditor
suneditor.disabled();

// Enabled the suneditor
suneditor.enabled();

// Hide the suneditor
suneditor.hide();

// Show the suneditor
suneditor.show();



// Destroy the suneditor
suneditor.destroy();

Registro de cambios

v2.12.3 (03/22/2019)

• Se ha corregido un error que provocaba que el campo de entrada de color hexadecimal del módulo colorPicker no funcionaba desde la versión 2.9.4.
• Se ha corregido un error en el que al usar el complemento de cuadro de diálogo después de crear más de un editor, los resultados se aplicaron al editor que tenía el foco antes.
• Corregido Print no funcionaba desde la versión 2.8.3.
• Fijo en línea, el modo de globo no funcionaba correctamente desde la versión 2.12.1.
• Se eliminó el estilo de celda seleccionado en la tabla.
• Agregado z-index a los controladores

v2.12.0 (03/21/2019)

• El archivo de idioma se ha modificado para agregarse al objeto global SUNEDITOR_LANG cuando se usa en HTML.
• Agregada traducción al chino (zh_CN).

v2.11.0 (03/19/2019)

• Añadida la opción youtubeQuery – la cadena de consulta de una URL incrustada de YouTube.

v2.11.0 (03/17/2019)

• Agregada función de evento onImageUploadError – llama cuando se ha producido un error en la carga de la imagen.
• Se agregó el argumento imageInfo a la función onImageUpload.
• Añadida la traducción al Japón.
• Se ha corregido un error que hacía que el valor de altura se corriera al añadir la primera imagen.

v2.10.2 (03/14/2019)

• Se ha corregido un error que hacía que los caracteres desaparecieran intermitentemente al cambiar de nodo.
• Añadida traducción al alemán.
• Se agregó el botón Save y la opción ' callBackSave '.
• Se agregó la propiedad src a ' imagesInfo '.

v2.9.6 (02/07/2019)

• arreglo: el estilo del BTN-grupo, bug del foco
• Se ha corregido un error que hacía que el foco no se actualizaba en el editor cuando se utilizaban menús de submenú y de diálogo.

v2.9.5 (01/14/2019)

• arreglo: visualización del tamaño de fuente

v2.9.4 (12/14/2018)

• Fix: función de cambio de nodo

v2.9.3 (12/13/2018)

• modificar: evento del editor de globos
• arreglo: diálogo Enviar, modificar: submenú, controlador desactivado

v2.9.2 (12/12/2018)

• arreglo: tecla de atajo de golpe, editor de globos Ctrl + a

v2.9.1 (12/11/2018)

• arreglo: cambio de nodo – estilos múltiples comprobados

v2.9.0 (12/11/2018)

• Fix: control de excepciones de eventos de ventana

v2.8.5 (11/26/2018)

• arreglo: excepción nodeChange
• Delete: styleWithCss

v2.8.4 (11/22/2018)

• Bugfix

v2.8.3 (11/22/2018)

• actualizar

v2.8.2 (11/20/2018)

• arreglo: figcaption contentEditable

v2.8.1 (11/15/2018)

• arreglo: cambio de nodo, datos del portapapeles

v2.8.0 (11/11/2018)

• Fix: Rotate Caption

v2.7.0 (11/06/2018)

• Fix: pre Tag Overflow

v2.6.3 (11/05/2018)

• arreglo: vista de código – TextArea
• arreglo: tamaño porcentual
• arreglo: vista de código – TextArea

v2.6.1 (10/30/2018)

• Fix: botón de vista de código desenfoque
• opción de agregar – resizingBar

v2.5.3 (10/28/2018)

• Errores

v2.4.3 (10/25/2018)

• modifique: util – getOffset, defaultCommand-> commandHandler
• corrección: Compruebe la descripción al editar la imagen
• modificar: icono de pantalla completa

v2.4.2 (10/19/2018)

• modificar: módulo de botón, salto de línea, estilo de botón
• modificar: función de sangría

v2.4.0 (10/18/2018)

• añadido: cambiar el tamaño del módulo – rotar
• arreglo: la visualización predeterminada
• Fix: objeto editor

v2.3.2 (10/16/2018)

• arreglo: desactivado, habilitado, appendContents, setContents

v2.3.1 (10/11/2018)

• arreglo: wrapToTags, appendContent, resizin, modificar: Preview, JSHint

v2.3.0 (10/08/2018)

• modificar: Arrow CSS

v2.2.7 (10/04/2018)

• modificar: estilo de botón, arreglo: estilo de contenido

v2.2.6 (10/02/2018)

• Fix: función de cambio de nodo – same node

v2.2.5 (10/02/2018)

• Fix: función de cambio de nodo

v2.2.4 (09/28/2018)

• arreglo: imagen – xmlHttp, modificar, cargar caja

v2.2.2 (09/27/2018)

• arreglo: evento móvil, submenú, callModule
• arreglo: Core – administrar las etiquetas en la operación de eliminación
• arreglo: getRange, inserto de imagen
• Fix: opción de visualización, agitación de árbol
• actualizar: dialog module split -> dialog, resizing
• arreglo: aplicado "getFormElement" para sangrar y la función de nodo
• arreglo: codeView, modificar: codeView CSS, convertContentsForEditor, User FUNC
• actualizar: button disabled in codeView, added hr icon, modify: contents.css
• arreglo: fuente CSS del área de edición
• actualizar: table cell controller, modify: language, fonts, css
• arreglo: una etiqueta CSS
• solución: wrapRangeToTag

v1.11.4 (08/31/2018)

• arreglo: contexto – eliminar originElementDisplay, añadida navegación

v1.11.2 (08/29/2018)

• eliminar: SUNEDITOR. destroy

v1.11.1 (08/29/2018)

• solución: wrapRangeToTag function

v1.11.0 (08/28/2018)

• actualizar: label path (showPathLabel), User function : getContext; fix: when format tag deleted, format tag check

v1.10.4 (08/22/2018)

• arreglo: el menú horizontalRules, _ Findbuttoneffecttag performance

v1.10.3 (08/22/2018)

• arreglo: SVG-> fuente web, efectos de botón, optimizaciones

v1.10.2 (08/17/2018)

• Fix: módulo de vídeo

v1.10.1 (08/17/2018)

• arreglo: Firefox, opera Window. event

v1.10.0 (08/16/2018)

• actualizar: image, video module – resizing, revert, constrain proportions

v1.9.0 (08/12/2018)

• Añadido botón Mostrar bloques

v1.8.2 (08/11/2018)

• actualizar: module box line break,
• arreglo: previa viewport

v1.7.2 (08/11/2018)

• actualizar: subscript, superscript

v1.6.2 (07/19/2018)

• arreglo: enlace openDialog

v1.6.0 (07/16/2018)

• actualizar: added image resize controller – left

v1.4.0 (07/15/2018)

• actualizar: formats

v1.3.1 (07/14/2018)

• arreglo: setContent, getContent, agregada función _ Convertcontentforeditor
• arreglo: CSS z-index

v1.3.0 (06/29/2018)

• actualizar: added image – Alternative Text

v1.2.4 (06/25/2018)

• arreglo: creación de etiquetas de párrafo

v1.2.3 (06/12/2018)

• Bugfix.

v1.2.0 (05/24/2018)

• Añadidas más funcionalidades.