Loading...
Loading...
A SunEditor 24 beépített bővítménnyel érkezik, amelyek a média, a formázás és a speciális funkciók kezelését teszik lehetővé.
Minden bővítmény egy megjelenítési típushoz tartozik, amely meghatározza, hogyan jelenik meg az eszköztáron.
A display tulajdonság határozza meg, hogyan kommunikál a bővítmény a felhasználóval.
imagekonfigurálhatóKépek feltöltése, átméretezése és igazítása
videokonfigurálhatóVideótartalom beszúrása és kezelése
audiokonfigurálhatóHangfájlok beszúrása lejátszóval
linkHiperhivatkozások létrehozása és szerkesztése
embedkonfigurálhatóKülső tartalom beágyazása (YouTube, iframe-ek)
drawingkonfigurálhatóVászon alapú rajzeszköz
mathkonfigurálhatóMatematikai egyenletszerkesztő (KaTeX)
A configurable jelölésű bővítményekhez olyan beállítások tartoznak, amelyeket a Játszótéren módosíthatsz.
Módosíthatod a képfeltöltési korlátokat, a betűméret mértékegységeit, a táblázat görgetési típusait, az említéseket aktiváló eseményeket és egyebeket. A változtatások azonnal érvénybe lépnek egy élő szerkesztőben.
Technikai útmutató egyéni bővítmények készítéséhez – az egyszerű parancsgomboktól a teljes párbeszédpanelen alapuló funkciókig.
Regisztráld a plugin osztályokat az options.plugins fájlban. A mag példányosítja őket.
Minden szerkesztőszolgáltatás ezen keresztül érhető el.$ — soha ne importálj közvetlenül alap modulokat.
Több szerződés (ModuleModal, EditorComponent) implementálása az életciklusokhoz való kapcsolódás érdekében.
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;Válassz egy alaposztályt az alapján, hogy a bővítmény hogyan kommunikál a felhasználóval.
PluginCommandcommandKívánt: action()Button click executes action immediately
Beépített példák: blockquote, hr, strike
PluginDropdowndropdownKívánt: action()Button opens menu, item click calls action()
Beépített példák: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
Beépített példák: table, fontColor, codeBlock
PluginModalmodalKívánt: open(), modalAction()Button opens modal dialog
Beépített példák: link, image, video
PluginBrowserbrowserKívánt: open(), close()Button opens gallery/browser interface
Beépített példák: imageGallery
PluginFieldfieldResponds to editor input events
Beépített példák: autocomplete
PluginInputinputToolbar input element (not a button)
Beépített példák: pageNavigator
PluginPopuppopupKívánt: show(), controllerAction()Inline popup context menu
Beépített példák: anchor
Egy bővítmény más típusú interfészeket is megvalósíthat, hogy több interakciós módot biztosítson.
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.