Loading...
Loading...
SunEditor leveres med 24 indbyggede plugins, der dækker medier, formatering og avancerede funktioner.
Hvert plugin tilhører en displaytype, der bestemmer, hvordan det vises i værktøjslinjen.
Egenskaben display definerer, hvordan plugin'et interagerer med brugeren.
imagekonfigurerbarUpload, tilpas størrelsen på og juster billeder
videokonfigurerbarIndsæt og administrer videoindhold
audiokonfigurerbarIndsæt lydfiler med afspilleren
linkOpret og rediger hyperlinks
embedkonfigurerbarIntegrer eksternt indhold (YouTube, iframes)
drawingkonfigurerbarLærredsbaseret tegneværktøj
mathkonfigurerbarMatematisk ligningseditor (KaTeX)
Plugins markeret med configurable har muligheder, du kan justere i Playground.
Juster grænser for billedupload, skriftstørrelsesenheder, typer af tabelrulning, omtaleudløsere og meget mere. Ændringer anvendes øjeblikkeligt i en live editor.
Teknisk reference til at bygge brugerdefinerede plugins — fra simple kommandoknapper til komplette dialogbaserede funktioner.
Registrer plugin-klasser i options.plugins. Kernen instantierer dem.
Alle editortjenester tilgås via this.$ — importer aldrig kernemoduler direkte.
Implementer flere kontrakter (ModuleModal, EditorComponent) for at integrere i livscyklusser.
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;Vælg en basisklasse baseret på, hvordan dit plugin interagerer med brugeren.
PluginCommandcommandPåkrævet: action()Button click executes action immediately
Indbyggede eksempler: blockquote, hr, strike
PluginDropdowndropdownPåkrævet: action()Button opens menu, item click calls action()
Indbyggede eksempler: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Indbyggede eksempler: table, fontColor, codeBlock
PluginModalmodalPåkrævet: open(), modalAction()Button opens modal dialog
Indbyggede eksempler: link, image, video
PluginBrowserbrowserPåkrævet: open(), close()Button opens gallery/browser interface
Indbyggede eksempler: imageGallery
PluginFieldfieldResponds to editor input events
Indbyggede eksempler: autocomplete
PluginInputinputToolbar input element (not a button)
Indbyggede eksempler: pageNavigator
PluginPopuppopupPåkrævet: show(), controllerAction()Inline popup context menu
Indbyggede eksempler: anchor
Et plugin kan også implementere andre plugin-typegrænseflader for at give flere interaktionstilstande.
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.