CKEditor API

CKEditor API-ը նոր է Drupal 8-ում։

Նշեք, որ սա վերաբերում է միայն Drupal 8-ի CKEditor մոդուլի API-ին, ոչ թե CKEditor JavaScript գրադարանի API-ին՝ դրա համար տես՝ http://docs.ckeditor.com/։

Լրացուցիչ տեղեկությունների համար այն մասին, թե ինչ է անում այս մոդուլը, տես Տեքստային խմբագրիչի մոդուլի փաստաթղթերը։

API-ի առանձնահատկություններ

Կարգավորված է ամենաքիչ օգտագործվող API-ներից դեպի ավելի հաճախ օգտագործվողները՝

CKEditor ոճեր (skins)

Drupal 8-ում CKEditor-ը լռությամբ օգտագործում է Moono ոճը։ Սա հարմար է շատ կայքերի համար, քանի որ բավականին նեյտրալ ոճ է։ Սակայն որոշ կայքեր ցանկանում են իդեալական ինտեգրում, և այդ դեպքում դուք կարող եք տեղադրել այլ ոճ՝ նույնիսկ ձեր կողմից ստեղծված։
Դրա համար կկարողանաք իրականացնել hook_editor_js_settings_alter():

function hook_editor_js_settings_alter(array &$settings) {
  foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
    if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
      $settings['editor']['formats'][$text_format_id]['editorSettings']['skin'] = 'SKIN_NAME,ABSOLUTE_URL_TO_SKIN';
    }
  }
}

CKEditor iframe CSS

CSS-ը, որը բեռնվում է CKEditor-ի iframe-ի օրինակներում, օրինակ՝ /node/add/article (որոնք չեն օգտագործվում տեղում խմբագրման համար), կարող է անհրաժեշտ լինել հարմարեցնել՝ համապատասխանեցնելու front-end-ի ոճին (WYSIWYG սիրողների համար) կամ ցույց տալ կառուցվածքը (մաքուր տեքստային խմբագիր նախընտրողների համար):
        - Front-end թեմայի CSS
Մոտավորապես բոլոր արտաքին թեմաները ունեն CSS՝ պարբերակների, մեջբերումների, նկարների մակագրությունների և այլն ոճավորելու համար։ Հետևաբար բոլոր արտաքին թեմաները պետք է սահմանեն CKEditor iframe-ի օրինակներին բեռնվող CSS-ը՝ ցանկացած բովանդակության (տեքստ/նշում) համար, որը կարող են ստեղծել բովանդակության ստեղծողները։ Դա կարելի է անել՝ նշելով ckeditor_stylesheets բանալին իրենց *.info.yml ֆայլում։ Դրանց մեջ թվարկված CSS ռեսուրսներն էլ բեռնվում են iframe-ում։ Տեսեք օրինակ Բարթիկում։ Փոխանցեք նաև Ինչպես ստիպել CKEditor-ին համապատասխանել ձեր արտաքին թեմային («WYSIWYG-ը ստվեր է») ուղեցույցը։
        - CSS մոդուլ
Մոդուլները, որոնք բերում են CSS արտաքին ինտերֆեյսում, կարող են օգտագործել hook_ckeditor_css_alter(), որպեսզի նաև այն CSS-ը բեռնեն CKEditor iframe-ի օրինակներում։

CKEditor պլագիններ

Ավելացրեք ավելի շատ ֆունկցիոնալություն CKEditor-ում։

\Drupal\ckeditor\CKEditorPluginInterface՝ Drupal պլագիններ, որոնք համընկնում են CKEditor պլագինների հետ 1:1 հարաբերակցությամբ, որպեսզի Drupal-ը իմանա, թե ինչ CKEditor պլագիններ են մատչելի։ Դրանից ծագում է առաջին հայացքից զարմանալի անունը՝ CKEditor Plugin Plugins, բայց դա լիովին տրամաբանական է։

• Կան չորս լրացուցիչ ինտերֆեյս, որոնք կարող եք իրականացնել՝

              1. \Drupal\ckeditor\CKEditorPluginButtonsInterface թույլ է տալիս CKEditor պլագինին սահմանել, թե ինչ կոճակներ է նա տրամադրում, որպեսզի օգտատերերը կարողանան հարմարեցնել CKEditor-ի գործիքների շարքի օրինակները քաշքշման ինտերֆեյսի միջոցով։
Օրինակ՝ \Drupal\ckeditor\Plugin\CKEditorPlugin\StylesCombo տրամադրում է CKEditor գործիքագոտու կոճակ (հակառակը՝ dropdown ցուցակ):
              2. \Drupal\ckeditor\CKEditorPluginContextualInterface թույլ է տալիս CKEditor պլագինին ավտոմատապես ակտիվանալ կախված կոնտեքստից՝ օրինակ՝ եթե մի քանի այլ CKEditor պլագինների կոճակներ միացված են, եթե մի ֆիլտր ակտիվ է, եթե որևէ CKEditor պլագինի պարամետր ունի որոշակի արժեք կամ բոլոր վերոնշյալների համադրություն։
Օրինակ՝ \Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalImageCaption ինքնաբերաբար ակտիվանում է, եթե կա Image կոճակը և միացված է Alignment կամ Caption ֆիլտրը։
              3. \Drupal\ckeditor\CKEditorPluginConfigurableInterface թույլ է տալիս CKEditor պլագինին սահմանել պարամետրերի ֆորմա՝ CKEditor պլագինի ցանկացած պարամետրերի հարմարեցման համար։
Օրինակ՝ \Drupal\ckeditor\Plugin\CKEditorPlugin\StylesCombo պլագինը թույլ է տալիս հարմարեցնել կիրառվող ոճերը։
              4. \Drupal\ckeditor\CKEditorPluginCssInterface 8.1.0-ից թույլ է տալիս CKEditor պլագինին սահմանել լրացուցիչ CSS, որը բեռնվում է CKEditor iframe օրինակներում։
Օրինակ՝ \Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalImageCaption բեռնում է լրացուցիչ CSS։

• Պլագինների իրականացման համար պետք է օգտագործել @CKEditorPlugin անոտացիան, որպեսզի դրանք հայտնաբերելի լինեն։

Սա ներառում է CKEditor պլագինի ID-ն։ Անոտացիայում նշված ID-ն պետք է համընկնի JavaScript պլագինի անունին, որը սահմանվում է պլագինի գրանցման ժամանակ։

// Պլագինի PHP-ում անոտացիան պետք է համընկնի այստեղ սահմանվածի հետ։
CKEDITOR.plugins.add('pluginId', { ... });

• Հայտնաբերված պլագինների անոտացիայի մետատվյալները կարող են փոփոխվել hook_ckeditor_plugin_info_alter()-ի միջոցով։
• \Drupal\ckeditor\CKEditorPluginBase տրամադրում է նախնական իրականացում, այնպես որ CKEditor պլագինները պետք չէ իրականացնել բոլոր մեթոդները։ Սա հարմար է առավել տարածված դեպքերի համար՝ պլագինների համար, որոնք միայն կոճակներ են տրամադրում։

Եվ վերջում, նոր տեքստային խմբագրիչ պլագին ստեղծելիս դուք հավանաբար կցանկանաք համոզվել, որ դրա UX-ը հիանալի աշխատում է։ Դրա համար դիտեք ckeditor.drupalimage.admin.js և ckeditor.stylescombo.admin.js օրինակները։ Նշեք, որ այս ասպեկտը (և միայն այս ասպեկտը!) կարող է փոխվել https://www.drupal.org/node/2567801-ում։

Անվտանգության և փնտրտուքների օգնություն

Drupal 8-ում ներառված է CKEditor-ի հարմարեցված և օպտիմալացված կառուցվածք։ Տես core/assets/vendor/ckeditor/build-config.js ֆայլը։ Այս ֆայլում ներառված փաստաթղթում բացատրվում է, թե ինչպես փոխարինել CKEditor-ի ներկառուցված (արդյունաբերական օպտիմիզացված) հավաքածուն Drupal 8-ում՝ մշակման համար օպտիմալացված (առանց փաթեթավորման) հավաքածուով։

Այլ նյութեր

• CKEditor մոդուլ՝ խոր ինտեգրված տեքստային խմբագիր
• Տեքստային խմբագիր մոդուլ՝ օգնական խմբագիրները կապում է տեքստային ձևաչափերի հետ
• Ֆիլտր մոդուլ՝ տեքստային ձևաչափեր, որոնք ֆիլտրում են օգտատերերի մուտքագրումը
• Տեքստային խմբագրիչ API
• Drupal 8՝ կառուցվածքային բովանդակության լավագույն ստեղծման փորձ
• CKEditor Drupal 8-ում՝ կայքի և ծրագրավորողների հարցուպատասխանը
• Դասընթաց՝ Drupal 8-ում հիմնական CKEditor-ի ընդլայնված ֆունկցիոնալության ստեղծում
• Դասընթաց՝ Ինչպես ստիպել CKEditor-ին համապատասխանել ձեր արտաքին թեմային («WYSIWYG-ը ստվեր է»)
• CKEditor Widget պլագինների մշակումը՝ Widget-ների ներածություն
• Drupal 8-ի CKEditor-ով առնչվող մոդուլների ցուցակ