{"id":60380,"date":"2024-02-27T11:27:36","date_gmt":"2024-02-27T05:57:36","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=60380"},"modified":"2024-02-27T11:27:36","modified_gmt":"2024-02-27T05:57:36","slug":"how-to-create-custom-plugin-in-drupal-ckeditor-5","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/","title":{"rendered":"How to Create Custom plugin in Drupal Ckeditor 5"},"content":{"rendered":"<h2><strong>Introduction<\/strong><\/h2>\n<p>CKEditor 5 is the default editor in Drupal 10, having been initially introduced in Drupal 9.3. CKEditor 5 was written completely from scratch, and it&#8217;s based on ES6. Ckeditor-5 also provides the flexibility to create custom plugins within the editor just like ckeditor-4. Now CKEditor 5 has a lot of enhanced features in Drupal.<\/p>\n<h2><strong>CKEditor 5 Premium Features<\/strong><\/h2>\n<p>The CKEditor 5 Premium Features module expands on the default functionality offered in the core. It includes features such as real-time collaboration in the editor area, exporting to PDF and Word files, importing from Word files (.docx and .dotx), and full-screen mode.<\/p>\n<h2><strong>Some highlighted premium features of CKEditor 5<\/strong><\/h2>\n<ul>\n<li>Track changes (to make suggested edits)<\/li>\n<li>Comments (to discuss the content)<\/li>\n<li>Revision History (to see what changes were made and compare and restore previous versions of the content)<\/li>\n<li>Real-time Collaboration<\/li>\n<li>Notification, Export to PDF &amp; Word, Import from Word, Full-screen mode, etc<\/li>\n<\/ul>\n<p>To enable the Premium feature in Drupal 10, we need to purchase the license &amp; enable\/configure this module. You can read<a href=\"https:\/\/www.drupal.org\/project\/ckeditor5_premium_features\"> here<\/a> about the premium features of the ckeditor5.\u00a0CKE 5 Provides a set of rich debugging tools for editor internals like model, view, and commands.<\/p>\n<p><strong>CKEditor 5 inspector:<\/strong> Drupal provides a debug module called\u00a0 CKEditor 5 inspector. it provides the debug console, which is helpful to debug &amp; build the plugin.<\/p>\n<p>We can download &amp; enable in Drupal<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-60381 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/02\/framework-development-tools-inspector-1024x760.jpeg\" alt=\"devtool\" width=\"625\" height=\"464\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/02\/framework-development-tools-inspector-1024x760.jpeg 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/02\/framework-development-tools-inspector-300x223.jpeg 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/02\/framework-development-tools-inspector-768x570.jpeg 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/02\/framework-development-tools-inspector-1536x1140.jpeg 1536w, \/blog\/wp-ttn-blog\/uploads\/2024\/02\/framework-development-tools-inspector-2048x1520.jpeg 2048w, \/blog\/wp-ttn-blog\/uploads\/2024\/02\/framework-development-tools-inspector-624x463.jpeg 624w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p>Reference: <a href=\"https:\/\/www.drupal.org\/project\/ckeditor5_dev\" target=\"_blank\" rel=\"noopener\">https:\/\/www.drupal.org\/project\/ckeditor5_dev<\/a><\/p>\n<p>It also provides a starter template in <strong>\/ckeditor5_plugin_starter_template<\/strong> for modules providing custom CKEditor 5 plugins.<\/p>\n<p><strong>Step : 1<\/strong> Copy the <strong>ckeditor5_plugin_starter_template<\/strong> &amp; paste it into the module folder &amp; rename it (like \/module\/custom\/test). Replace the MODULE_NAME with your module name in all the files.<\/p>\n<p><strong>Step : 2 Download dependency:<\/strong> From the module root directory, run the command <strong>npm install <\/strong>(it will download all the dependencies in node_module folder, which is mentioned in package.json)<\/p>\n<p><strong>Step: 3 Make a build:<\/strong> Within the root directory of the module, we need to run <strong>npm run build <\/strong>It will make the build and will create a file within the <em>\/js\/build\/{plugin_name.js}<\/em> automatically.<\/p>\n<p>That&#8217;s it Drupal plugin is created; we can enable it in the editor, Default plugin name is simple_box_demo<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-60382 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/02\/cke-plugin-1024x455.png\" alt=\"cke-plugin\" width=\"625\" height=\"278\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/02\/cke-plugin-1024x455.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/02\/cke-plugin-300x133.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/02\/cke-plugin-768x341.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/02\/cke-plugin-1536x683.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2024\/02\/cke-plugin-624x277.png 624w, \/blog\/wp-ttn-blog\/uploads\/2024\/02\/cke-plugin.png 1591w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<h2><strong>Let&#8217;s Understand the some file uses &amp; workflow<\/strong><\/h2>\n<p>There are two ways to enable plugins either yml or PHP class<\/p>\n<h3><strong>Using Yml<\/strong><\/h3>\n<p><strong>MODULE_NAME.ckeditor5.yml <\/strong><\/p>\n<div>\n<pre>test_demo_simplebox:\r\n  ckeditor5:\r\n  \u00a0 plugins:\r\n  \u00a0 \u00a0 - demoPlugin.SimpleBox\r\n  drupal:\r\n  \u00a0 label: Simple box demo\r\n  \u00a0 library: test\/demobox\r\n  \u00a0 admin_library: test\/admin.demobox\r\n  \u00a0 toolbar_items:\r\n  \u00a0 \u00a0 simpleBox:\r\n  \u00a0 \u00a0 \u00a0 label: Simple box demo\r\n  \u00a0 elements:\r\n  \u00a0 \u00a0 - &lt;h2&gt;\r\n  \u00a0 \u00a0 - &lt;h2 class=\"simple-box-title\"&gt;\r\n  \u00a0 \u00a0 - &lt;div&gt;\r\n  \u00a0 \u00a0 - &lt;div class=\"simple-box-description\"&gt;\r\n  \u00a0 \u00a0 - &lt;section&gt;\r\n  \u00a0 \u00a0 - &lt;section class=\"simple-box\"&gt;<\/pre>\n<p>It stores the information about the Drupal plugin &amp; ckeditor5 plugin.<\/p>\n<p><strong>Using PHP Class<\/strong>: PHP class is only needed when using dynamic data, it means if we have a configuration in the editor. We need to declare the class within the .ckeditor5.yml file.<\/p>\n<pre>ckeditor5_custom_paste_pasteFilter:\r\nckeditor5:\r\nplugins:\r\n- pasteFilter.PasteFilter\r\ndrupal:\r\nlabel: Ckeditor 5 Custom Paste\r\nclass: \\Drupal\\ckeditor5_custom_paste\\Plugin\\CKEditor5Plugin\\PasteFilter\r\nlibrary: ckeditor5_custom_paste\/custom_paste_filter\r\nelements: false<\/pre>\n<\/div>\n<div>\n<p>For creating Drupal configuration, we need to create a Drupal CKEditor plugin with in<em>\/src\/Plugin\/CKEditor5Plugin\/PLUGIN_NAME.php<\/em><\/p>\n<pre>class PasteFilter extends CKEditor5PluginDefault{\r\n\/\/ code goes here\r\n}<\/pre>\n<p><strong>package.json:<\/strong> Within this file, we need to declare the CKEditor dependency &amp; web pack config, which will help to download the CKE dependency &amp; make a build with npm\/yarn<\/p>\n<p><strong>webpack.config.js:<\/strong> Within this file we need to declare the path &amp; configuration about the build Drupal uses the concept of DLL build, based on the configuration\/path it will create the build.<\/p>\n<h2><strong>Create CKEditor ES6 based Plugin<\/strong><\/h2>\n<p>\/js\/ckeditor5_plugin\/PLUGIN_NAME\/src\/<\/p>\n<ul>\n<li>index.js: export the plugin; the purpose is to make a plugin(s) discoverable.<\/li>\n<li>PLUGIN_NAME.js<\/li>\n<\/ul>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>We understand the basics of the newly introduced CKEditor-5 and some key points of the editor. We also highlighted the premium feature of the CKEditor-5. There is the step by step process to create a custom plugin within Drupal 10. It will create the dummy plugin for you; based on our needs and requirements, we can enhance that plugin.<\/p>\n<p>There is a reference of the CKEditor-5 plugin API to understand better.<\/p>\n<p>Reference :<\/p>\n<p><a href=\"https:\/\/ckeditor.com\/docs\/ckeditor5\/latest\/framework\/architecture\/core-editor-architecture.html#plugins\" target=\"_blank\" rel=\"noopener\">https:\/\/ckeditor.com\/docs\/ckeditor5\/latest\/framework\/architecture\/core-editor-architecture.html#plugins <\/a><\/p>\n<\/div>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>Introduction CKEditor 5 is the default editor in Drupal 10, having been initially introduced in Drupal 9.3. CKEditor 5 was written completely from scratch, and it&#8217;s based on ES6. Ckeditor-5 also provides the flexibility to create custom plugins within the editor just like ckeditor-4. Now CKEditor 5 has a lot of enhanced features in Drupal. [&hellip;]<\/p>\n","protected":false},"author":1509,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":913},"categories":[3602],"tags":[5659,4862],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60380"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1509"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=60380"}],"version-history":[{"count":5,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60380\/revisions"}],"predecessor-version":[{"id":60472,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60380\/revisions\/60472"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=60380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=60380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=60380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}