Loading...
Loading...
O SunEditor vem com 24 plugins integrados que abrangem mídia, formatação e recursos avançados.
Cada plugin pertence a um tipo de exibição que determina como ele aparece na barra de ferramentas.
A propriedade display define como o plugin interage com o usuário.
imageconfigurávelCarregar, redimensionar e alinhar imagens
videoconfigurávelInserir e gerenciar conteúdo de vídeo
audioconfigurávelInsira arquivos de áudio com o reprodutor.
linkCriar e editar hiperlinks
embedconfigurávelIncorporar conteúdo externo (YouTube, iframes)
drawingconfigurávelFerramenta de desenho baseada em tela
mathconfigurávelEditor de equações matemáticas (KaTeX)
Os plugins marcados como configurable possuem opções que você pode ajustar no Playground.
Ajuste os limites de upload de imagens, unidades de tamanho de fonte, tipos de rolagem de tabelas, gatilhos de menção e muito mais. As alterações são aplicadas instantaneamente ao editor em tempo real.
Guia técnico para a criação de plugins personalizados — desde botões de comando simples até funcionalidades completas baseadas em diálogos.
Registre as classes de plugin em options.plugins. O núcleo as instancia.
Todos os serviços do editor são acessados por meio deste.$ — nunca importe módulos principais diretamente.
Implemente múltiplos contratos (ModuleModal, EditorComponent) para se integrar aos ciclos de vida.
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;Escolha uma classe base com base em como seu plugin interage com o usuário.
PluginCommandcommandObrigatório: action()Button click executes action immediately
Exemplos integrados: blockquote, hr, strike
PluginDropdowndropdownObrigatório: action()Button opens menu, item click calls action()
Exemplos integrados: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Exemplos integrados: table, fontColor, codeBlock
PluginModalmodalObrigatório: open(), modalAction()Button opens modal dialog
Exemplos integrados: link, image, video
PluginBrowserbrowserObrigatório: open(), close()Button opens gallery/browser interface
Exemplos integrados: imageGallery
PluginFieldfieldResponds to editor input events
Exemplos integrados: autocomplete
PluginInputinputToolbar input element (not a button)
Exemplos integrados: pageNavigator
PluginPopuppopupObrigatório: show(), controllerAction()Inline popup context menu
Exemplos integrados: anchor
Um plugin também pode implementar outras interfaces de plugin para fornecer múltiplos modos de interação.
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.