Loading...
Loading...
يأتي برنامج SunEditor مزودًا بـ 24 إضافة مدمجة تغطي الوسائط والتنسيق والميزات المتقدمة.
ينتمي كل مكون إضافي إلى نوع عرض display الذي يحدد كيفية ظهوره في شريط الأدوات.
تحدد الخاصية display كيفية تفاعل المكون الإضافي مع المستخدم.
imageقابل للتكوينقم بتحميل الصور وتغيير حجمها ومحاذاتها
videoقابل للتكوينإدراج محتوى الفيديو وإدارته
audioقابل للتكوينأدرج ملفات الصوت باستخدام المشغل
linkإنشاء وتعديل الروابط التشعبية
embedقابل للتكوينتضمين محتوى خارجي (يوتيوب، إطارات مضمنة)
drawingقابل للتكوينأداة رسم قائمة على اللوحة القماشية
mathقابل للتكوينمحرر المعادلات الرياضية (KaTeX)
المكونات الإضافية التي تحمل علامة configurable تحتوي على خيارات يمكنك تعديلها في Playground.
يمكنك تعديل حدود تحميل الصور، ووحدات حجم الخط، وأنواع تمرير الجداول، ومحفزات الإشارات، وغير ذلك. تُطبّق التغييرات فورًا على المحرر المباشر.
مرجع تقني لبناء إضافات مخصصة - من أزرار الأوامر البسيطة إلى الميزات الكاملة القائمة على الحوار.
قم بتسجيل فئات المكونات الإضافية في ملف 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.