Loading...
Loading...
SunEditor viene fornito con 24 plugin integrati che coprono i media, la formattazione e le funzionalità avanzate.
Ogni plugin appartiene a un tipo di visualizzazione che determina come appare nella barra degli strumenti.
La proprietà display definisce come il plugin interagisce con l'utente.
imageconfigurabileCarica, ridimensiona e allinea le immagini
videoconfigurabileInserisci e gestisci i contenuti video
audioconfigurabileInserire i file audio con il lettore
linkCreare e modificare collegamenti ipertestuali
embedconfigurabileIncorpora contenuti esterni (YouTube, iframe)
drawingconfigurabileStrumento di disegno basato su tela
mathconfigurabileEditor di equazioni matematiche (KaTeX)
I plugin contrassegnati con configurable hanno opzioni che puoi modificare nel Playground.
Regola i limiti di caricamento delle immagini, le unità di misura delle dimensioni dei caratteri, i tipi di scorrimento delle tabelle, i trigger di menzione e altro ancora. Le modifiche vengono applicate istantaneamente all'editor in tempo reale.
Manuale tecnico di riferimento per la creazione di plugin personalizzati, dai semplici pulsanti di comando alle funzionalità complete basate su finestre di dialogo.
Registra le classi dei plugin in options.plugins. Il core le istanzia.
Tutti i servizi dell'editor sono accessibili tramite this.$ — non importare mai direttamente i moduli principali.
Implementare più contratti (ModuleModal, EditorComponent) per agganciarsi ai cicli di vita.
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;Scegli una classe base in base a come il tuo plugin interagisce con l'utente.
PluginCommandcommandNecessario: action()Button click executes action immediately
Esempi integrati: blockquote, hr, strike
PluginDropdowndropdownNecessario: action()Button opens menu, item click calls action()
Esempi integrati: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Esempi integrati: table, fontColor, codeBlock
PluginModalmodalNecessario: open(), modalAction()Button opens modal dialog
Esempi integrati: link, image, video
PluginBrowserbrowserNecessario: open(), close()Button opens gallery/browser interface
Esempi integrati: imageGallery
PluginFieldfieldResponds to editor input events
Esempi integrati: autocomplete
PluginInputinputToolbar input element (not a button)
Esempi integrati: pageNavigator
PluginPopuppopupNecessario: show(), controllerAction()Inline popup context menu
Esempi integrati: anchor
Un plugin può anche implementare interfacce di altri tipi di plugin per fornire molteplici modalità di interazione.
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.