Loading...
Loading...
SunEditor incluye 24 complementos integrados que abarcan funciones de medios, formato y características avanzadas.
Cada complemento pertenece a un tipo de visualización que determina cómo aparece en la barra de herramientas.
La propiedad display define cómo interactúa el complemento con el usuario.
imageconfigurableSube, redimensiona y alinea imágenes.
videoconfigurableInsertar y gestionar contenido de vídeo
audioconfigurableInserta archivos de audio con el reproductor
linkCrear y editar hipervínculos
embedconfigurableInsertar contenido externo (YouTube, iframes)
drawingconfigurableHerramienta de dibujo basada en lienzo
mathconfigurableEditor de ecuaciones matemáticas (KaTeX)
Los plugins marcados como configurable tienen opciones que puedes ajustar en el Playground.
Ajusta los límites de carga de imágenes, las unidades de tamaño de fuente, los tipos de desplazamiento de tabla, los activadores de menciones y mucho más. Los cambios se aplican instantáneamente al editor en vivo.
Referencia técnica para la creación de plugins personalizados, desde simples botones de comando hasta funciones completas basadas en diálogos.
Registra las clases de plugins en options.plugins. El núcleo las instancia.
Se accede a todos los servicios del editor a través de this.$ — nunca importe módulos principales directamente.
Implementar múltiples contratos (ModuleModal, EditorComponent) para integrarlos en los ciclos de vida.
import { PluginCommand } from 'suneditor/src/interfaces';
class HelloWorld extends PluginCommand {
static key = 'helloWorld';
/**
* @constructor
* @param {SunEditor.Kernel} kernel - The Kernel instance
*/
constructor(kernel) {
super(kernel);
this.title = 'Hello World';
this.icon = '<span style="font-size:14px">HW</span>';
}
/**
* @override
* @type {PluginCommand['action']}
*/
action() {
this.$.html.insert('<p>Hello, World!</p>');
this.$.history.push(false);
}
}
export default HelloWorld;Elige una clase base en función de cómo interactúa tu plugin con el usuario.
PluginCommandcommandRequerido: action()Button click executes action immediately
Ejemplos integrados: blockquote, hr, strike
PluginDropdowndropdownRequerido: action()Button opens menu, item click calls action()
Ejemplos integrados: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Ejemplos integrados: table, fontColor, codeBlock
PluginModalmodalRequerido: open(), modalAction()Button opens modal dialog
Ejemplos integrados: link, image, video
PluginBrowserbrowserRequerido: open(), close()Button opens gallery/browser interface
Ejemplos integrados: imageGallery
PluginFieldfieldResponds to editor input events
Ejemplos integrados: autocomplete
PluginInputinputToolbar input element (not a button)
Ejemplos integrados: pageNavigator
PluginPopuppopupRequerido: show(), controllerAction()Inline popup context menu
Ejemplos integrados: anchor
Un complemento también puede implementar otras interfaces de tipo complemento para proporcionar múltiples modos de interacción.
fontSizeextends PluginInput+ PluginCommand+ PluginDropdownInput field + dropdown list + command (inc/dec) all controlling font size.
list_bulleted / list_numberedextends PluginCommand+ PluginDropdownCommand button for toggling list + dropdown for selecting list style.