កម្មវិធីជំនួយ SunEditor

SunEditor ភ្ជាប់មកជាមួយកម្មវិធីជំនួយចំនួន 24 ដែលគ្របដណ្តប់លើមេឌៀ ការធ្វើទ្រង់ទ្រាយ និងមុខងារកម្រិតខ្ពស់។
កម្មវិធីជំនួយនីមួយៗជាកម្មសិទ្ធិរបស់ ប្រភេទបង្ហាញ ដែលកំណត់ពីរបៀបដែលវាលេចឡើងនៅក្នុងរបារឧបករណ៍។

កម្មវិធីជំនួយដែលភ្ជាប់មកជាមួយតាមប្រភេទបង្ហាញ

លក្ខណសម្បត្តិ display កំណត់ពីរបៀបដែលកម្មវិធីជំនួយធ្វើអន្តរកម្មជាមួយអ្នកប្រើប្រាស់។

សាកល្បងជម្រើសកម្មវិធីជំនួយ

កម្មវិធីជំនួយដែលសម្គាល់ថា configurable មានជម្រើសដែលអ្នកអាចកែសម្រួលបាននៅក្នុង Playground។

សួនកុមារ — របារចំហៀងជម្រើសកម្មវិធីជំនួយ

កែតម្រូវដែនកំណត់នៃការបង្ហោះរូបភាព ឯកតាទំហំពុម្ពអក្សរ ប្រភេទរមូរតារាង គន្លឹះក្នុងការលើកឡើង និងច្រើនទៀត។ ការផ្លាស់ប្តូរអនុវត្តភ្លាមៗចំពោះកម្មវិធីនិពន្ធផ្ទាល់។

ទីលានលេងបើកចំហ

បង្កើតកម្មវិធីជំនួយផ្ទាល់ខ្លួនរបស់អ្នក

ឯកសារយោងបច្ចេកទេសសម្រាប់ការបង្កើតកម្មវិធីជំនួយផ្ទាល់ខ្លួន — ចាប់ពីប៊ូតុងពាក្យបញ្ជាសាមញ្ញរហូតដល់មុខងារដែលមានមូលដ្ឋានលើប្រអប់សន្ទនាពេញលេញ។

ខ្សែសង្វាក់មរតក

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

ឯកសារយោងថ្នាក់

ចុះឈ្មោះថ្នាក់ plugin នៅក្នុង 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

ឯកសារវិធីសាស្រ្ត និងជម្រើសពេញលេញ

កូដប្រភពកម្មវិធីជំនួយ

អានការអនុវត្តកម្មវិធីជំនួយដែលភ្ជាប់មកជាមួយ

សហគមន៍

ការពិភាក្សា GitHub សម្រាប់សំណួរ និងចម្លើយ