Loading...
Loading...
SunEditor est livré avec 24 plugins intégrés couvrant les médias, la mise en forme et les fonctionnalités avancées.
Chaque plugin appartient à un type d'affichage qui détermine comment il apparaît dans la barre d'outils.
La propriété display définit la manière dont le plugin interagit avec l'utilisateur.
imageconfigurableTélécharger, redimensionner et aligner les images
videoconfigurableInsérer et gérer du contenu vidéo
audioconfigurableInsérer des fichiers audio avec le lecteur
linkCréer et modifier des hyperliens
embedconfigurableIntégrer du contenu externe (YouTube, iframes)
drawingconfigurableOutil de dessin basé sur la toile
mathconfigurableÉditeur d'équations mathématiques (KaTeX)
Les plugins marqués configurable possèdent des options que vous pouvez modifier dans le Playground.
Modifiez les limites de téléchargement d'images, les unités de taille de police, les types de défilement des tableaux, les déclencheurs de mentions, et bien plus encore. Les modifications sont appliquées instantanément à l'éditeur en direct.
Documentation technique pour la création de plugins personnalisés — des simples boutons de commande aux fonctionnalités complètes basées sur des boîtes de dialogue.
Enregistrez les classes de plugins dans options.plugins. Le noyau les instancie.
Tous les services de l'éditeur sont accessibles via this.$ — n'importez jamais directement les modules principaux.
Implémentez plusieurs contrats (ModuleModal, EditorComponent) pour vous intégrer aux cycles de vie.
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;Choisissez une classe de base en fonction de la manière dont votre plugin interagit avec l'utilisateur.
PluginCommandcommandRequis: action()Button click executes action immediately
Exemples intégrés: blockquote, hr, strike
PluginDropdowndropdownRequis: action()Button opens menu, item click calls action()
Exemples intégrés: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Exemples intégrés: table, fontColor, codeBlock
PluginModalmodalRequis: open(), modalAction()Button opens modal dialog
Exemples intégrés: link, image, video
PluginBrowserbrowserRequis: open(), close()Button opens gallery/browser interface
Exemples intégrés: imageGallery
PluginFieldfieldResponds to editor input events
Exemples intégrés: mention
PluginInputinputToolbar input element (not a button)
Exemples intégrés: pageNavigator
PluginPopuppopupRequis: show(), controllerAction()Inline popup context menu
Exemples intégrés: anchor
Un plugin peut également implémenter d'autres interfaces de type plugin pour fournir plusieurs modes d'interaction.
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.