Loading...
Loading...
SunEditor מגיע עם 24 תוספים מובנים המכסים מדיה, עיצוב ותכונות מתקדמות.
כל תוסף שייך לסוג תצוגה שקובע כיצד הוא מופיע בסרגל הכלים.
המאפיין display מגדיר כיצד התוסף מקיים אינטראקציה עם המשתמש.
imageניתן להגדרההעלאה, שינוי גודל ויישור של תמונות
videoניתן להגדרההוספה וניהול של תוכן וידאו
audioניתן להגדרההכנסת קבצי שמע באמצעות נגן
linkיצירה ועריכה של היפר-קישורים
embedניתן להגדרההטמעת תוכן חיצוני (יוטיוב, iframes)
drawingניתן להגדרהכלי ציור מבוסס קנבס
mathניתן להגדרהעורך משוואות מתמטיות (KaTeX)
לתוספים המסומנים כ-ניתן להגדרה יש אפשרויות שניתן לכוונן במגרש המשחקים.
התאם מגבלות העלאת תמונות, יחידות גודל גופן, סוגי גלילה בטבלאות, טריגרים לאזכור ועוד. שינויים חלים באופן מיידי על עורך חי.
מקור טכני לבניית תוספים מותאמים אישית - מכפתורי פקודה פשוטים ועד לתכונות מלאות מבוססות דיאלוגים.
רשום מחלקות תוספים בפונקציה 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.