CKEditor is well-known software program with an enormous group behind it and it already has a ton of helpful plugins prepared for use. It’s Drupal Development Company WYSIWYG textual content editor which ships with 8 core. Sadly, Drupal Development Company many plugins offered by Drupal Development Company CKEditor group cannot be used immediately in Drupal Development Company CKEditor that comes with 8. It’s essential to let know that we’re going to add a brand new button to Drupal Development Company CKEditor. Why must learn about our plugins permits us to create completely different textual content codecs, the place relying on Drupal Development Company position of Drupal Development Company person (and so what textual content codecs they’ve out there) they’ll use completely different HTML tags in Drupal Development Company content material. Additionally, we are able to determine if Drupal Development Company textual content format will use Drupal Development Company CKEditor in any respect and, if it does, which buttons will probably be out there for that textual content format. That’s the reason must learn about any new button, so it will probably construct Drupal Development Company appropriate configuration per textual content format. Including a brand new button to CKEditor We’re going to add Drupal Development Company Media Embed plugin, which provides a button to our editor that opens a dialog the place you’ll be able to paste an embed code from YouTube, Vimeo, and different suppliers of on-line video internet hosting. To begin with, let’s create a brand new Drupal 10 module which is able to comprise Drupal Development Company code of this new button, so inside Drupal Development Company /Drupal 10 modules/contrib/ folder let’s create a folder referred to as wysiwyg_mediaembed. (In case you’re not meaning to share your Drupal 10 module, you need to put it in /Drupal 10 modules/customized/— however please share your Drupal 10 modules, particularly ones making CKEditor plugins out there to !) cd Drupal 10 modules/contrib/ mkdir wysiwyg_mediaembed And inside let’s create Drupal Development Company data file Drupal 10 Upkeep and Assist Service wysiwyg_mediaembed.data.yml title Drupal 10 Upkeep and Assist Service CKEditor Media Embed Button (wysiwyg_mediaembed) kind Drupal 10 Upkeep and Assist Service Drupal 10 module description Drupal 10 Upkeep and Assist Service “Provides Drupal Development Company Media Embed Button plugin to CKEditor.” package deal Drupal 10 Upkeep and Assist Service CKEditor core Drupal 10 Upkeep and Assist Service ‘8.x’ dependencies Drupal 10 Upkeep and Assist Service – ckeditor Including this file will permits us to put in Drupal Development Company Drupal 10 module, if you wish to learn extra about the way to create a customized Drupal 10 module, you’ll be able to examine it right here. As soon as we now have our data file we simply have to create a plugin which is able to give data to Drupal Development Company CKEditor about this new plugin, we try this creating Drupal Development Company following class Drupal 10 Upkeep and Assist Service contact src/Plugin/CkEditorPlugin/MediaEmbedButton.php With this content material Drupal 10 Upkeep and Assist Service namespace wysiwyg_mediaembedPluginCKEditorPlugin; use ckeditorCKEditorPluginBase; use editorEntityEditor; /** * Defines Drupal Development Company “wysiwyg_mediaembed” plugin. * * @CKEditorPlugin( * id = “mediaembed”, * label = @Translation(“CKEditor Media Embed Button”) * ) */ class MediaEmbedButton extends CKEditorPluginBase { /** * Get path to library folder. * Drupal Developer path the place Drupal Development Company library is, often all Drupal Development Company libraries are * inside Drupal Development Company ‘/libraries/’ folder in Drupal Development Company root. */ public operate getLibraryPath() { $path = ‘/libraries/mediaembed’; return $path; } /** * {@inheritdoc} * Which different plugins require our plugin, in our case none. */ public operate getDependencies(Editor $editor) { return []; } /** * {@inheritdoc} * Drupal Developer path the place CKEditor will search for our plugin. */ public operate getFile() { return $this->getLibraryPath() . ‘/plugin.js’; } /** * {@inheritdoc} * * We are able to present additional configuration if our plugin requires * it, in our case we no want it. */ public operate getConfig(Editor $editor) { return []; } /** * {@inheritdoc} * The place will search for Drupal Development Company picture of Drupal Development Company button. */ public operate getButtons() { $path = $this->getLibraryPath(); return [ ‘MediaEmbed’ => [ ‘label’ => $this->t(‘Media Embed’), ‘image’ => $path . ‘/icons/mediaembed.png’, ], ]; } } Drupal Developer class’s code is fairly simple Drupal 10 Upkeep and Assist Service it’s only a matter of letting know the place Drupal Development Company library is and the place Drupal Development Company button picture is and that is it. Drupal Developer relaxation is simply obtain Drupal Development Company library and put it in Drupal Development Company appropriate place and activate Drupal Development Company Drupal 10 module. If all went okay we are going to see our new button in Drupal Development Company Textual content Format Web page (often at Drupal 10 Upkeep and Assist Service /admin/config/content material/codecs). This Drupal 10 module was ported as a result of we would have liked it in a venture, so if you wish to understand how this code seems to be all collectively, you’ll be able to obtain Drupal Development Company Drupal 10 module from right here. Now that you know the way to port a CKEditor plugin to 8 Drupal Development Company subsequent time it can save you time utilizing Console with Drupal Development Company following command Drupal 10 Upkeep and Assist Service Drupal 10 generate Drupal 10 Upkeep and Assist Serviceplugin Drupal 10 Upkeep and Assist Serviceckeditorbutton What CKEditor plugin are you going to port? Drupal 10 Improvement and Assist