افزونه‌های SunEditor

SunEditor با ۲۴ افزونه‌ی داخلی ارائه می‌شود که شامل رسانه‌ها، قالب‌بندی و ویژگی‌های پیشرفته می‌شود.
هر افزونه به یک displaytype تعلق دارد که نحوه نمایش آن را در نوار ابزار تعیین می‌کند.

افزونه‌های داخلی بر اساس نوع نمایش

ویژگی display نحوه تعامل افزونه با کاربر را تعریف می‌کند.

گزینه‌های افزونه را امتحان کنید

افزونه‌هایی که با configurable مشخص شده‌اند، گزینه‌هایی دارند که می‌توانید در Playground آنها را تغییر دهید.

زمین بازی — نوار کناری گزینه‌های افزونه

محدودیت‌های آپلود تصویر، واحدهای اندازه فونت، انواع اسکرول جدول، تریگرهای منشن و موارد دیگر را تنظیم کنید. تغییرات فوراً در یک ویرایشگر زنده اعمال می‌شوند.

زمین بازی روباز

افزونه خودتان را بسازید

مرجع فنی برای ساخت افزونه‌های سفارشی - از دکمه‌های فرمان ساده گرفته تا ویژگی‌های کامل مبتنی بر دیالوگ.

زنجیره وراثت

KernelInjector→Base→PluginCommand / PluginModal / PluginDropdown / ...

مراجع کلاس

کلاس‌های افزونه را در 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-free

Button 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

PluginFieldfield

Responds to editor input events

نمونه‌های داخلی: autocomplete

PluginInputinput

Toolbar input element (not a button)

نمونه‌های داخلی: pageNavigator

PluginPopuppopupمورد نیاز: show(), controllerAction()

Inline popup context menu

نمونه‌های داخلی: anchor

ترکیب افزونه‌های متقابل

یک افزونه همچنین می‌تواند رابط‌های نوع افزونه دیگری را پیاده‌سازی کند تا حالت‌های تعاملی متعددی را ارائه دهد.

fontSizeextends PluginInput+ PluginCommand+ PluginDropdown

Input field + dropdown list + command (inc/dec) all controlling font size.

list_bulleted / list_numberedextends PluginCommand+ PluginDropdown

Command button for toggling list + dropdown for selecting list style.

منابع

مرجع API

مستندات کامل روش و گزینه

کد منبع افزونه

پیاده‌سازی‌های افزونه داخلی را بخوانید

جامعه

بحث‌های گیت‌هاب برای پرسش و پاسخ