{"id":60380,"date":"2024-02-27T11:27:36","date_gmt":"2024-02-27T05:57:36","guid":{"rendered":"https:\/\/2thenew.today\/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:\/\/2thenew.today\/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 loading=\"lazy\" decoding=\"async\" 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=\"https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/framework-development-tools-inspector-1024x760.jpeg 1024w, https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/framework-development-tools-inspector-300x223.jpeg 300w, https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/framework-development-tools-inspector-768x570.jpeg 768w, https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/framework-development-tools-inspector-1536x1140.jpeg 1536w, https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/framework-development-tools-inspector-2048x1520.jpeg 2048w, https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/framework-development-tools-inspector-624x463.jpeg 624w\" sizes=\"auto, (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 loading=\"lazy\" decoding=\"async\" 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=\"https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/cke-plugin-1024x455.png 1024w, https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/cke-plugin-300x133.png 300w, https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/cke-plugin-768x341.png 768w, https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/cke-plugin-1536x683.png 1536w, https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/cke-plugin-624x277.png 624w, https:\/\/2thenew.today\/blog\/wp-content\/uploads\/2024\/02\/cke-plugin.png 1591w\" sizes=\"auto, (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":1004,"footnotes":""},"categories":[3602],"tags":[5659,4862],"class_list":["post-60380","post","type-post","status-publish","format-standard","hentry","category-drupal","tag-ckeditor-5","tag-drupal"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"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&#039;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.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Dharmendra Singh\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"TO THE NEW BLOG\" \/>\n\t\t<meta property=\"og:type\" content=\"blog\" \/>\n\t\t<meta property=\"og:title\" content=\"How to Create Custom plugin in Drupal Ckeditor 5 | TO THE NEW Blog\" \/>\n\t\t<meta property=\"og:description\" content=\"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&#039;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.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/2thenew.today\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/2thenew.today\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@tothenew\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How to Create Custom plugin in Drupal Ckeditor 5 | TO THE NEW Blog\" \/>\n\t\t<meta name=\"twitter:description\" content=\"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&#039;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.\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/2thenew.today\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/how-to-create-custom-plugin-in-drupal-ckeditor-5\\\/#article\",\"name\":\"How to Create Custom plugin in Drupal Ckeditor 5 | TO THE NEW Blog\",\"headline\":\"How to Create Custom plugin in Drupal Ckeditor 5\",\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/dharmendra-singh\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"\\\/blog\\\/wp-ttn-blog\\\/uploads\\\/2024\\\/02\\\/framework-development-tools-inspector-1024x760.jpeg\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/how-to-create-custom-plugin-in-drupal-ckeditor-5\\\/#articleImage\"},\"datePublished\":\"2024-02-27T11:27:36+05:30\",\"dateModified\":\"2024-02-27T11:27:36+05:30\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/how-to-create-custom-plugin-in-drupal-ckeditor-5\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/how-to-create-custom-plugin-in-drupal-ckeditor-5\\\/#webpage\"},\"articleSection\":\"Drupal, Ckeditor 5, Drupal\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/how-to-create-custom-plugin-in-drupal-ckeditor-5\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/drupal\\\/#listItem\",\"name\":\"Drupal\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/drupal\\\/#listItem\",\"position\":2,\"name\":\"Drupal\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/drupal\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/how-to-create-custom-plugin-in-drupal-ckeditor-5\\\/#listItem\",\"name\":\"How to Create Custom plugin in Drupal Ckeditor 5\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/how-to-create-custom-plugin-in-drupal-ckeditor-5\\\/#listItem\",\"position\":3,\"name\":\"How to Create Custom plugin in Drupal Ckeditor 5\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/drupal\\\/#listItem\",\"name\":\"Drupal\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\",\"name\":\"TO THE NEW Blog\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/dharmendra-singh\\\/#author\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/dharmendra-singh\\\/\",\"name\":\"Dharmendra Singh\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/how-to-create-custom-plugin-in-drupal-ckeditor-5\\\/#authorImage\",\"url\":\"https:\\\/\\\/newersworld-sf-static.tothenew.net\\\/prod\\\/profilePicFolder\\\/ad525276-cd87-41c2-9529-e11eab739076_5068-Dharmendra-Singh-PROFILEPICTURE.jpeg\",\"width\":96,\"height\":96,\"caption\":\"Dharmendra Singh\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/how-to-create-custom-plugin-in-drupal-ckeditor-5\\\/#webpage\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/how-to-create-custom-plugin-in-drupal-ckeditor-5\\\/\",\"name\":\"How to Create Custom plugin in Drupal Ckeditor 5 | TO THE NEW Blog\",\"description\":\"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'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.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/how-to-create-custom-plugin-in-drupal-ckeditor-5\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/dharmendra-singh\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/dharmendra-singh\\\/#author\"},\"datePublished\":\"2024-02-27T11:27:36+05:30\",\"dateModified\":\"2024-02-27T11:27:36+05:30\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\",\"name\":\"TO THE NEW Blog\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How to Create Custom plugin in Drupal Ckeditor 5 | TO THE NEW Blog","description":"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'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.","canonical_url":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/#article","name":"How to Create Custom plugin in Drupal Ckeditor 5 | TO THE NEW Blog","headline":"How to Create Custom plugin in Drupal Ckeditor 5","author":{"@id":"https:\/\/2thenew.today\/blog\/author\/dharmendra-singh\/#author"},"publisher":{"@id":"https:\/\/2thenew.today\/blog\/#organization"},"image":{"@type":"ImageObject","url":"\/blog\/wp-ttn-blog\/uploads\/2024\/02\/framework-development-tools-inspector-1024x760.jpeg","@id":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/#articleImage"},"datePublished":"2024-02-27T11:27:36+05:30","dateModified":"2024-02-27T11:27:36+05:30","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/#webpage"},"isPartOf":{"@id":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/#webpage"},"articleSection":"Drupal, Ckeditor 5, Drupal"},{"@type":"BreadcrumbList","@id":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/2thenew.today\/blog#listItem","position":1,"name":"Home","item":"https:\/\/2thenew.today\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/2thenew.today\/blog\/category\/drupal\/#listItem","name":"Drupal"}},{"@type":"ListItem","@id":"https:\/\/2thenew.today\/blog\/category\/drupal\/#listItem","position":2,"name":"Drupal","item":"https:\/\/2thenew.today\/blog\/category\/drupal\/","nextItem":{"@type":"ListItem","@id":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/#listItem","name":"How to Create Custom plugin in Drupal Ckeditor 5"},"previousItem":{"@type":"ListItem","@id":"https:\/\/2thenew.today\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/#listItem","position":3,"name":"How to Create Custom plugin in Drupal Ckeditor 5","previousItem":{"@type":"ListItem","@id":"https:\/\/2thenew.today\/blog\/category\/drupal\/#listItem","name":"Drupal"}}]},{"@type":"Organization","@id":"https:\/\/2thenew.today\/blog\/#organization","name":"TO THE NEW Blog","url":"https:\/\/2thenew.today\/blog\/"},{"@type":"Person","@id":"https:\/\/2thenew.today\/blog\/author\/dharmendra-singh\/#author","url":"https:\/\/2thenew.today\/blog\/author\/dharmendra-singh\/","name":"Dharmendra Singh","image":{"@type":"ImageObject","@id":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/#authorImage","url":"https:\/\/newersworld-sf-static.tothenew.net\/prod\/profilePicFolder\/ad525276-cd87-41c2-9529-e11eab739076_5068-Dharmendra-Singh-PROFILEPICTURE.jpeg","width":96,"height":96,"caption":"Dharmendra Singh"}},{"@type":"WebPage","@id":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/#webpage","url":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/","name":"How to Create Custom plugin in Drupal Ckeditor 5 | TO THE NEW Blog","description":"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'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.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/2thenew.today\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/#breadcrumblist"},"author":{"@id":"https:\/\/2thenew.today\/blog\/author\/dharmendra-singh\/#author"},"creator":{"@id":"https:\/\/2thenew.today\/blog\/author\/dharmendra-singh\/#author"},"datePublished":"2024-02-27T11:27:36+05:30","dateModified":"2024-02-27T11:27:36+05:30"},{"@type":"WebSite","@id":"https:\/\/2thenew.today\/blog\/#website","url":"https:\/\/2thenew.today\/blog\/","name":"TO THE NEW Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/2thenew.today\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"TO THE NEW BLOG","og:type":"blog","og:title":"How to Create Custom plugin in Drupal Ckeditor 5 | TO THE NEW Blog","og:description":"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'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.","og:url":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/","og:image":"https:\/\/2thenew.today\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","og:image:secure_url":"https:\/\/2thenew.today\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","twitter:card":"summary","twitter:site":"@tothenew","twitter:title":"How to Create Custom plugin in Drupal Ckeditor 5 | TO THE NEW Blog","twitter:description":"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'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.","twitter:image":"https:\/\/2thenew.today\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png"},"aioseo_meta_data":{"post_id":"60380","title":null,"description":null,"keywords":[],"keyphrases":{"focus":[],"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":{"id":"#aioseo-article-65e03f1d054df","slug":"article","graphName":"Article","label":"Article","properties":{"type":"BlogPosting","name":"#post_title","headline":"#post_title","description":"#post_excerpt","image":"","keywords":"","author":{"name":"#author_name","url":"#author_url"},"dates":{"include":true,"datePublished":"","dateModified":""}}},"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":"{\"article\":{\"articleType\":\"BlogPosting\"},\"course\":{\"name\":\"\",\"description\":\"\",\"provider\":\"\"},\"faq\":{\"pages\":[]},\"product\":{\"reviews\":[]},\"recipe\":{\"ingredients\":[],\"instructions\":[],\"keywords\":[]},\"software\":{\"reviews\":[],\"operatingSystems\":[]},\"webPage\":{\"webPageType\":\"WebPage\"}}","pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"created":"2024-02-21 12:19:24","updated":"2024-02-29 08:23:57","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/2thenew.today\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/2thenew.today\/blog\/category\/drupal\/\" title=\"Drupal\">Drupal<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHow to Create Custom plugin in Drupal Ckeditor 5\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/2thenew.today\/blog"},{"label":"Drupal","link":"https:\/\/2thenew.today\/blog\/category\/drupal\/"},{"label":"How to Create Custom plugin in Drupal Ckeditor 5","link":"https:\/\/2thenew.today\/blog\/how-to-create-custom-plugin-in-drupal-ckeditor-5\/"}],"_links":{"self":[{"href":"https:\/\/2thenew.today\/blog\/wp-json\/wp\/v2\/posts\/60380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2thenew.today\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2thenew.today\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2thenew.today\/blog\/wp-json\/wp\/v2\/users\/1509"}],"replies":[{"embeddable":true,"href":"https:\/\/2thenew.today\/blog\/wp-json\/wp\/v2\/comments?post=60380"}],"version-history":[{"count":5,"href":"https:\/\/2thenew.today\/blog\/wp-json\/wp\/v2\/posts\/60380\/revisions"}],"predecessor-version":[{"id":60472,"href":"https:\/\/2thenew.today\/blog\/wp-json\/wp\/v2\/posts\/60380\/revisions\/60472"}],"wp:attachment":[{"href":"https:\/\/2thenew.today\/blog\/wp-json\/wp\/v2\/media?parent=60380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2thenew.today\/blog\/wp-json\/wp\/v2\/categories?post=60380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2thenew.today\/blog\/wp-json\/wp\/v2\/tags?post=60380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}