Loading...
Loading...
SunEditor, medya, biçimlendirme ve gelişmiş özellikler konularını kapsayan 24 adet yerleşik eklentiyle birlikte gelir.
Her eklenti, araç çubuğunda nasıl görüneceğini belirleyen bir görüntüleme türü'e aittir.
display özelliği, eklentinin kullanıcıyla nasıl etkileşim kuracağını tanımlar.
imageyapılandırılabilirGörüntüleri yükleyin, boyutlandırın ve hizalayın.
videoyapılandırılabilirVideo içeriği ekleyin ve yönetin
audioyapılandırılabilirOynatıcı ile ses dosyalarını ekleyin.
linkKöprü bağlantıları oluşturun ve düzenleyin.
embedyapılandırılabilirHarici içerik (YouTube, iframe'ler) yerleştirme
drawingyapılandırılabilirTuval tabanlı çizim aracı
mathyapılandırılabilirMatematiksel denklem düzenleyici (KaTeX)
configurable olarak işaretlenmiş eklentilerin Playground'da ince ayar yapabileceğiniz seçenekleri vardır.
Görüntü yükleme sınırlarını, yazı tipi boyutu birimlerini, tablo kaydırma türlerini, bahsetme tetikleyicilerini ve daha fazlasını ayarlayın. Değişiklikler canlı düzenleyiciye anında uygulanır.
Basit komut düğmelerinden tam diyalog tabanlı özelliklere kadar özel eklentiler oluşturmaya yönelik teknik referans.
Eklenti sınıflarını options.plugins dosyasında kaydedin. Çekirdek bunları örneklendirir.
Tüm editör hizmetlerine bu $ üzerinden erişilir — çekirdek modülleri asla doğrudan içe aktarmayın.
Yaşam döngülerine müdahale etmek için birden fazla sözleşme (ModuleModal, EditorComponent) uygulayın.
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;Eklentinizin kullanıcıyla nasıl etkileşim kurduğuna bağlı olarak bir temel sınıf seçin.
PluginCommandcommandGerekli: action()Button click executes action immediately
Dahili örnekler: blockquote, hr, strike
PluginDropdowndropdownGerekli: action()Button opens menu, item click calls action()
Dahili örnekler: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Dahili örnekler: table, fontColor, codeBlock
PluginModalmodalGerekli: open(), modalAction()Button opens modal dialog
Dahili örnekler: link, image, video
PluginBrowserbrowserGerekli: open(), close()Button opens gallery/browser interface
Dahili örnekler: imageGallery
PluginFieldfieldResponds to editor input events
Dahili örnekler: autocomplete
PluginInputinputToolbar input element (not a button)
Dahili örnekler: pageNavigator
PluginPopuppopupGerekli: show(), controllerAction()Inline popup context menu
Dahili örnekler: anchor
Bir eklenti, birden fazla etkileşim modu sağlamak için diğer eklenti türü arayüzlerini de uygulayabilir.
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.