Loading...
Loading...
SunEditor постачається з 24 вбудованими плагінами, що охоплюють медіа, форматування та розширені функції.
Кожен плагін належить до типу відображення, який визначає, як він відображається на панелі інструментів.
Властивість display визначає, як плагін взаємодіє з користувачем.
imageналаштовуванийЗавантаження, зміна розміру та вирівнювання зображень
videoналаштовуванийВставка та керування відеоконтентом
audioналаштовуванийВставка аудіофайлів за допомогою плеєра
linkСтворення та редагування гіперпосилань
embedналаштовуванийВбудовування зовнішнього контенту (YouTube, iframes)
drawingналаштовуванийІнструмент для малювання на основі полотна
mathналаштовуванийРедактор математичних рівнянь (KaTeX)
Плагіни з позначкою configurable мають опції, які можна налаштувати на ігровому майданчику.
Налаштуйте обмеження завантаження зображень, одиниці розміру шрифту, типи прокручування таблиці, тригери згадок тощо. Зміни миттєво застосовуються до активного редактора.
Технічний довідник зі створення власних плагінів — від простих командних кнопок до повноцінних функцій на основі діалогових вікон.
Зареєструйте класи плагінів у options.plugins. Ядро створює їх екземпляри.
Доступ до всіх сервісів редактора здійснюється через цей код.$ — ніколи не імпортуйте основні модулі безпосередньо.
Реалізуйте кілька контрактів (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.