Loading...
Loading...
В состав SunEditor входят 24 встроенных плагина, охватывающих работу с медиафайлами, форматирование и расширенные функции.
Каждый плагин относится к типу отображения, который определяет, как он отображается на панели инструментов.
Свойство display определяет, как плагин взаимодействует с пользователем.
imageнастраиваемыйЗагрузка, изменение размера и выравнивание изображений.
videoнастраиваемыйВставка и управление видеоконтентом
audioнастраиваемыйВставляйте аудиофайлы с помощью проигрывателя.
linkСоздание и редактирование гиперссылок
embedнастраиваемыйВстраивание внешнего контента (YouTube, iframe)
drawingнастраиваемыйИнструмент для рисования на холсте
mathнастраиваемыйРедактор математических уравнений (KaTeX)
Плагины, помеченные как configurable, имеют параметры, которые можно настроить в Playground.
Настройте ограничения на загрузку изображений, единицы измерения размера шрифта, типы прокрутки таблиц, триггеры для упоминаний и многое другое. Изменения мгновенно применяются в редакторе в режиме реального времени.
Технический справочник по созданию пользовательских плагинов — от простых кнопок управления до полноценных диалоговых окон.
Зарегистрируйте классы плагинов в файле options.plugins. Ядро создаст их экземпляры.
Все редакторские сервисы доступны через this.$ — никогда не импортируйте основные модули напрямую.
Реализуйте несколько контрактов (ModuleModal, EditorComponent) для интеграции с различными жизненными циклами.
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;Выберите базовый класс в зависимости от того, как ваш плагин взаимодействует с пользователем.
PluginCommandcommandНеобходимый: action()Button click executes action immediately
Встроенные примеры: blockquote, hr, strike
PluginDropdowndropdownНеобходимый: action()Button opens menu, item click calls action()
Встроенные примеры: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Встроенные примеры: table, fontColor, codeBlock
PluginModalmodalНеобходимый: open(), modalAction()Button opens modal dialog
Встроенные примеры: link, image, video
PluginBrowserbrowserНеобходимый: open(), close()Button opens gallery/browser interface
Встроенные примеры: imageGallery
PluginFieldfieldResponds to editor input events
Встроенные примеры: autocomplete
PluginInputinputToolbar input element (not a button)
Встроенные примеры: pageNavigator
PluginPopuppopupНеобходимый: show(), controllerAction()Inline popup context menu
Встроенные примеры: anchor
Плагин также может реализовывать интерфейсы других типов плагинов для обеспечения нескольких режимов взаимодействия.
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.