Loading...
Loading...
SunEditor zawiera 24 wbudowane wtyczki obejmujące funkcje multimedialne, formatowanie i funkcje zaawansowane.
Każda wtyczka należy do typu wyświetlania, który określa sposób jej wyświetlania na pasku narzędzi.
Właściwość display definiuje sposób interakcji wtyczki z użytkownikiem.
imagekonfigurowalnyPrzesyłaj, zmieniaj rozmiar i wyrównuj obrazy
videokonfigurowalnyWstawianie i zarządzanie treścią wideo
audiokonfigurowalnyWstaw pliki audio za pomocą odtwarzacza
linkTworzenie i edycja hiperłączy
embedkonfigurowalnyOsadź zewnętrzną zawartość (YouTube, ramki iframe)
drawingkonfigurowalnyNarzędzie do rysowania na płótnie
mathkonfigurowalnyEdytor równań matematycznych (KaTeX)
Wtyczki oznaczone jako configured mają opcje, które można dostosować w Playground.
Dostosuj limity przesyłania obrazów, jednostki rozmiaru czcionki, typy przewijania tabeli, wyzwalacze wzmianek i wiele więcej. Zmiany zostaną natychmiast zastosowane w edytorze na żywo.
Informacje techniczne na temat tworzenia niestandardowych wtyczek — od prostych przycisków poleceń po pełne funkcje oparte na oknach dialogowych.
Zarejestruj klasy wtyczek w options.plugins. Rdzeń je utworzy.
Dostęp do wszystkich usług edytora odbywa się poprzez this.$ — nigdy nie importuj bezpośrednio modułów głównych.
Wdrażaj wiele kontraktów (ModuleModal, EditorComponent) w celu powiązania ich z cyklami życia.
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;Wybierz klasę bazową na podstawie sposobu interakcji wtyczki z użytkownikiem.
PluginCommandcommandWymagany: action()Button click executes action immediately
Wbudowane przykłady: blockquote, hr, strike
PluginDropdowndropdownWymagany: action()Button opens menu, item click calls action()
Wbudowane przykłady: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Wbudowane przykłady: table, fontColor, codeBlock
PluginModalmodalWymagany: open(), modalAction()Button opens modal dialog
Wbudowane przykłady: link, image, video
PluginBrowserbrowserWymagany: open(), close()Button opens gallery/browser interface
Wbudowane przykłady: imageGallery
PluginFieldfieldResponds to editor input events
Wbudowane przykłady: autocomplete
PluginInputinputToolbar input element (not a button)
Wbudowane przykłady: pageNavigator
PluginPopuppopupWymagany: show(), controllerAction()Inline popup context menu
Wbudowane przykłady: anchor
Wtyczka może również implementować inne interfejsy typu wtyczki, aby zapewnić wiele trybów interakcji.
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.