{"id":57593,"date":"2023-06-22T15:34:40","date_gmt":"2023-06-22T10:04:40","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=57593"},"modified":"2023-06-23T15:39:32","modified_gmt":"2023-06-23T10:09:32","slug":"make-your-drupal-9-ckeditor-pop-4-useful-modules-you-didnt-know-existed","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/make-your-drupal-9-ckeditor-pop-4-useful-modules-you-didnt-know-existed\/","title":{"rendered":"Make Your Drupal 9 CKEditor Pop \u2013 4 Useful Modules You Didn\u2019t Know Existed"},"content":{"rendered":"

The most important CMS feature is actually the content editor. Additionally, Drupal has significantly improved its content management capabilities with various new features for Drupal 8\/9, including the CKEditor widget system and the Advanced Content Filter (ACF), thanks to the powerhouse that is CKEditor as its default rich text editing tool. So, yes, even with the default features, it’s quite powerful. But some contributed modules and plug-ins can help you truly step up your CKEditor game. Learn more about the top and most intriguing add-ons for CKEditor in the following paragraphs.<\/span><\/p>\n

\"\"<\/p>\n

The Drupal 9 CKEditor<\/b><\/h2>\n

First, for those who are unfamiliar with Drupal, the WYSIWYG (What you see is what you get) default rich editor in Drupal 8 and 9 is CKEditor 4.5. It’s a text editor that aids website administrators in adding and editing content to web pages. Similar to Drupal, CKEditor is an open source project that has recently received an update with a number of powerful new features that will be further developed. Contributors to Drupal aim to integrate the newest and most up-to-date version, CKEditor 5, into Drupal 10, as part of the Drupal 10 readiness campaign.<\/span><\/p>\n

Now that we have the basics out of the way, let\u2019s get into the upgrades!<\/span><\/p>\n

Extending CKEditor with these fantastic Drupal 9 modules<\/b><\/h2>\n

1. CKEditor Read More\u00a0<\/b><\/h3>\n

You know those occasions when you want to offer the reader the option to read the remaining material in a lengthy passage? Use the CKEditor Read More option at that point to encourage your users to “read on” while maintaining a condensed style for your website. Once you install the contributor module, Drupal 9 offers a quick and easy way to enable the Read More \/ Show Less capability.<\/span><\/p>\n

\"\"<\/p>\n

Implementing the module:<\/span><\/p>\n

Once you install this module, you will need to configure a few settings:<\/span><\/p>\n

    \n
  1. Edit preferred Text format and enable \u201cLimit allowed HTML tags\u201d.<\/span><\/li>\n
  2. Add <div data-readmore-less-text data-readmore-more-text data-readmore-type class=” ckeditor-readmore”> in \u201cAllowed HTML tags\u201d. Disable the \u201cLimit allowed HTML tags\u201d and hit save.<\/span><\/li>\n
  3. Now drag and drop the \u201cRead more\u201d icon from available buttons to active toolbar (as shown in the image above) and hit save.<\/span><\/li>\n
  4. After clearing the cache you will find the \u201cRead More\u201d icon in the text editor when you choose the \u201cPreferred Text format\u201d.<\/span><\/li>\n<\/ol>\n

    2. CKEditor Color Button<\/b><\/h3>\n

    By default, CKEditor does not provide you the option to alter the colour of the text inside the editor. However, the Drupal 9 CKEditor Colour Button module needs to be on your list if you want to alter the colour of a particular text or even highlight the text with various colours. Keep taking mind that installing this module also necessitates installing the Panel button module, and installing both of these modules necessitates installing the Colour Button Library and the Panel Button Library. The colours button can be moved from the available buttons to the active toolbar in the appropriate text format after installing the modules and adding libraries to the theme’s libraries folder.\u00a0<\/span><\/p>\n

    \"\"<\/p>\n

    3. CKEditor Youtube\u00a0<\/b><\/h3>\n

    The Drupal 9 CKEditor Youtube module helps you add Youtube videos into your content without a long embed code. After installing and moving the Youtube icon form from Available buttons to Active toolbar, you can find Youtube icons in the text editor in preferred text format. This module depends on the library.<\/span><\/p>\n

    \"\"<\/p>\n

    4. CKEditor CodeSnippet<\/b><\/h3>\n

    You can insert “code content”\u2014which is code that is highlighted and properly formatted\u2014within the content using the CKEditor CodeSnippet module. This module makes use of the highlight-js package and all of its supported styles. The composer will automatically install the library when this module is installed. After installing this module, you can switch the “code snippet” icon from the Available button to the Active toolbar.\u00a0<\/span><\/p>\n

    The text format settings for the CKEditor plugin now have a Code Snippet tab. You can select or deselect the supported programming languages here.\u00a0<\/span><\/p>\n

    \"\"<\/p>\n

    Conclusion:<\/strong><\/p>\n

    Even without all of these fantastic add-ons, CKEditor is among the most user-friendly and effective WYSIWYG editors available. Some numerous additional plugins and modules can help you expand and further customize your editor. It provides a scalable and efficient way to use CK Editor.\u00a0<\/span><\/p>\n

    Let us know in case of any queries, please feel free to reach out via comments.<\/p>\n

    <\/div>","protected":false},"excerpt":{"rendered":"

    The most important CMS feature is actually the content editor. Additionally, Drupal has significantly improved its content management capabilities with various new features for Drupal 8\/9, including the CKEditor widget system and the Advanced Content Filter (ACF), thanks to the powerhouse that is CKEditor as its default rich text editing tool. So, yes, even with […]<\/p>\n","protected":false},"author":1515,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":7},"categories":[3602],"tags":[5254,4884,5253],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57593"}],"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\/1515"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=57593"}],"version-history":[{"count":4,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57593\/revisions"}],"predecessor-version":[{"id":57670,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57593\/revisions\/57670"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=57593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=57593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=57593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}