Loading...
Loading...
SunEditor wordt geleverd met 24 ingebouwde plug-ins voor media, opmaak en geavanceerde functies.
Elke plugin behoort tot een display type dat bepaalt hoe deze in de werkbalk wordt weergegeven.
De eigenschap display definieert hoe de plugin met de gebruiker interacteert.
imageconfigureerbaarAfbeeldingen uploaden, verkleinen en uitlijnen.
videoconfigureerbaarVideo-inhoud invoegen en beheren
audioconfigureerbaarVoeg audiobestanden in met de speler.
linkHyperlinks maken en bewerken
embedconfigureerbaarExterne content insluiten (YouTube, iframes)
drawingconfigureerbaarTekentool op basis van canvas
mathconfigureerbaarEditor voor wiskundige vergelijkingen (KaTeX)
Plugins met de aanduiding configurable hebben opties die je in de Playground kunt aanpassen.
Pas de limieten voor het uploaden van afbeeldingen, de eenheden voor lettergroottes, het scrolltype van tabellen, de triggers voor vermeldingen en meer aan. Wijzigingen worden direct toegepast in de live editor.
Technische handleiding voor het bouwen van aangepaste plug-ins — van eenvoudige opdrachtknoppen tot complete dialoogvensters.
Registreer plugin-klassen in options.plugins. De core instantieert ze.
Alle editorservices worden via this.$ benaderd — importeer nooit kernmodules rechtstreeks.
Implementeer meerdere contracten (ModuleModal, EditorComponent) om in te haken op de levenscyclus.
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;Kies een basisklasse op basis van de manier waarop uw plugin met de gebruiker interacteert.
PluginCommandcommandVereist: action()Button click executes action immediately
Ingebouwde voorbeelden: blockquote, hr, strike
PluginDropdowndropdownVereist: action()Button opens menu, item click calls action()
Ingebouwde voorbeelden: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Ingebouwde voorbeelden: table, fontColor, codeBlock
PluginModalmodalVereist: open(), modalAction()Button opens modal dialog
Ingebouwde voorbeelden: link, image, video
PluginBrowserbrowserVereist: open(), close()Button opens gallery/browser interface
Ingebouwde voorbeelden: imageGallery
PluginFieldfieldResponds to editor input events
Ingebouwde voorbeelden: autocomplete
PluginInputinputToolbar input element (not a button)
Ingebouwde voorbeelden: pageNavigator
PluginPopuppopupVereist: show(), controllerAction()Inline popup context menu
Ingebouwde voorbeelden: anchor
Een plugin kan ook andere plugin-type interfaces implementeren om meerdere interactiemodi te bieden.
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.