Loading...
Loading...
SunEditor wird mit 24 integrierten Plugins ausgeliefert, die Medien, Formatierung und erweiterte Funktionen abdecken.
Jedes Plugin gehört zu einem display type, der bestimmt, wie es in der Symbolleiste angezeigt wird.
Die Eigenschaft display definiert, wie das Plugin mit dem Benutzer interagiert.
imagekonfigurierbarBilder hochladen, Größe ändern und ausrichten
videokonfigurierbarVideoinhalte einfügen und verwalten
audiokonfigurierbarFügen Sie Audiodateien mit dem Player ein.
linkHyperlinks erstellen und bearbeiten
embedkonfigurierbarExterne Inhalte einbetten (YouTube, iFrames)
drawingkonfigurierbarCanvas-basiertes Zeichenwerkzeug
mathkonfigurierbarEditor für mathematische Gleichungen (KaTeX)
Plugins mit der Kennzeichnung configurable bieten Optionen, die Sie im Playground anpassen können.
Passen Sie die Upload-Beschränkungen für Bilder, die Schriftgrößeneinheiten, die Tabellen-Scrolltypen, die Auslöser für Erwähnungen und vieles mehr an. Änderungen werden sofort im Live-Editor übernommen.
Technisches Nachschlagewerk für die Entwicklung benutzerdefinierter Plugins – von einfachen Befehlsschaltflächen bis hin zu vollständigen dialogbasierten Funktionen.
Registrieren Sie Plugin-Klassen in options.plugins. Der Kern instanziiert sie.
Alle Editor-Dienste werden über this.$ aufgerufen – Kernmodule werden niemals direkt importiert.
Implementieren Sie mehrere Verträge (ModuleModal, EditorComponent), um sich in Lebenszyklen einzuklinken.
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;Wählen Sie eine Basisklasse basierend darauf, wie Ihr Plugin mit dem Benutzer interagiert.
PluginCommandcommandErforderlich: action()Button click executes action immediately
Eingebaute Beispiele: blockquote, hr, strike
PluginDropdowndropdownErforderlich: action()Button opens menu, item click calls action()
Eingebaute Beispiele: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Eingebaute Beispiele: table, fontColor, codeBlock
PluginModalmodalErforderlich: open(), modalAction()Button opens modal dialog
Eingebaute Beispiele: link, image, video
PluginBrowserbrowserErforderlich: open(), close()Button opens gallery/browser interface
Eingebaute Beispiele: imageGallery
PluginFieldfieldResponds to editor input events
Eingebaute Beispiele: autocomplete
PluginInputinputToolbar input element (not a button)
Eingebaute Beispiele: pageNavigator
PluginPopuppopupErforderlich: show(), controllerAction()Inline popup context menu
Eingebaute Beispiele: anchor
Ein Plugin kann auch andere Plugin-Typ-Schnittstellen implementieren, um mehrere Interaktionsmodi bereitzustellen.
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.