Loading...
Loading...
SunEditor este livrat cu 24 de plugin-uri încorporate care acoperă media, formatare și funcții avansate.
Fiecare plugin aparține unui tip de afișare care determină modul în care apare în bara de instrumente.
Proprietatea display definește modul în care pluginul interacționează cu utilizatorul.
imageconfigurabilÎncărcați, redimensionați și aliniați imagini
videoconfigurabilInserarea și gestionarea conținutului video
audioconfigurabilIntroduceți fișiere audio cu playerul
linkCrearea și editarea hyperlinkurilor
embedconfigurabilÎncorporează conținut extern (YouTube, iframe-uri)
drawingconfigurabilInstrument de desen bazat pe pânză
mathconfigurabilEditor de ecuații matematice (KaTeX)
Pluginurile marcate configurabil au opțiuni pe care le puteți modifica în Playground.
Ajustați limitele de încărcare a imaginilor, unitățile de măsură pentru dimensiunea fontului, tipurile de derulare a tabelului, declanșatoarele de mențiuni și multe altele. Modificările se aplică instantaneu unui editor live.
Referință tehnică pentru construirea de pluginuri personalizate — de la simple butoane de comandă până la funcții complete bazate pe dialoguri.
Înregistrează clasele de pluginuri în options.plugins. Nucleul le instanțiază.
Toate serviciile editorului sunt accesate prin intermediul acestui sistem.$ — nu importați niciodată direct modulele de bază.
Implementați mai multe contracte (ModuleModal, EditorComponent) pentru a le conecta la ciclurile de viață.
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;Alegeți o clasă de bază în funcție de modul în care pluginul interacționează cu utilizatorul.
PluginCommandcommandNecesar: action()Button click executes action immediately
Exemple încorporate: blockquote, hr, strike
PluginDropdowndropdownNecesar: action()Button opens menu, item click calls action()
Exemple încorporate: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Exemple încorporate: table, fontColor, codeBlock
PluginModalmodalNecesar: open(), modalAction()Button opens modal dialog
Exemple încorporate: link, image, video
PluginBrowserbrowserNecesar: open(), close()Button opens gallery/browser interface
Exemple încorporate: imageGallery
PluginFieldfieldResponds to editor input events
Exemple încorporate: autocomplete
PluginInputinputToolbar input element (not a button)
Exemple încorporate: pageNavigator
PluginPopuppopupNecesar: show(), controllerAction()Inline popup context menu
Exemple încorporate: anchor
Un plugin poate implementa și alte interfețe de tip plugin pentru a oferi mai multe moduri de interacțiune.
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.