Loading...
Loading...
SunEditor levereras med 24 inbyggda plugins som täcker media, formatering och avancerade funktioner.
Varje plugin tillhör en displaytyp som avgör hur den visas i verktygsfältet.
Egenskapen display definierar hur plugin-programmet interagerar med användaren.
imagekonfigurerbarLadda upp, ändra storlek på och justera bilder
videokonfigurerbarInfoga och hantera videoinnehåll
audiokonfigurerbarInfoga ljudfiler med spelaren
linkSkapa och redigera hyperlänkar
embedkonfigurerbarBädda in externt innehåll (YouTube, iframes)
drawingkonfigurerbarCanvasbaserat ritverktyg
mathkonfigurerbarMatematisk ekvationsredigerare (KaTeX)
Insticksprogram markerade konfigurerbara har alternativ som du kan justera i Playground.
Justera gränser för bilduppladdning, teckenstorlekar, tabellskrollningstyper, omnämnandeutlösare och mer. Ändringarna tillämpas direkt i en live-redigerare.
Teknisk referens för att bygga anpassade plugins — från enkla kommandoknappar till fullständiga dialogbaserade funktioner.
Registrera plugin-klasser i options.plugins. Kärnan instansierar dem.
Alla redigeringstjänster nås via this.$ — importera aldrig kärnmoduler direkt.
Implementera flera kontrakt (ModuleModal, EditorComponent) för att koppla till livscykler.
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älj en basklass baserat på hur ditt plugin interagerar med användaren.
PluginCommandcommandNödvändig: action()Button click executes action immediately
Inbyggda exempel: blockquote, hr, strike
PluginDropdowndropdownNödvändig: action()Button opens menu, item click calls action()
Inbyggda exempel: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Inbyggda exempel: table, fontColor, codeBlock
PluginModalmodalNödvändig: open(), modalAction()Button opens modal dialog
Inbyggda exempel: link, image, video
PluginBrowserbrowserNödvändig: open(), close()Button opens gallery/browser interface
Inbyggda exempel: imageGallery
PluginFieldfieldResponds to editor input events
Inbyggda exempel: autocomplete
PluginInputinputToolbar input element (not a button)
Inbyggda exempel: pageNavigator
PluginPopuppopupNödvändig: show(), controllerAction()Inline popup context menu
Inbyggda exempel: anchor
Ett plugin kan också implementera andra gränssnitt av plugin-typ för att tillhandahålla flera interaktionslägen.
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.