{"type":"doc","content":[{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"As of 11/1/2023, CKEditor 5 is now what is installed in all Drupal sites.","type":"text"}]}]},{"type":"paragraph","content":[{"text":"CKEditor 5 is a widely-used WYSIWYG text editor tailored for web applications. When incorporating CKEditor 5 with content management systems like Drupal, understanding its interaction with filters such as the Basic HTML Filter and Full HTML Filter becomes essential. This knowledge base page sheds light on the primary differences and compatibility of CKEditor 5 with these filters, offering insights into its functionality for content filtering and security within the context of web development.","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"CKEditor 5 and Basic HTML Filter","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Modularity","type":"text","marks":[{"type":"strong"}]},{"text":": CKEditor 5 is more modular and modern. It allows easy integration with various filters, including the Basic HTML Filter.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Security","type":"text","marks":[{"type":"strong"}]},{"text":": CKEditor 5, when used with the Basic HTML Filter, offers enhanced security features, making it more robust against security threats by filtering out potentially harmful code by default.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Customization","type":"text","marks":[{"type":"strong"}]},{"text":": CKEditor 5 provides a flexible configuration system, enabling users to customize the editor's toolbar and behavior. This makes it easier to tailor the editor to specific needs.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Accessibility","type":"text","marks":[{"type":"strong"}]},{"text":": CKEditor 5 has improved accessibility features out of the box, making it a better choice for ensuring that the content created is accessible to all users.","type":"text"}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"CKEditor 5 and Full HTML Filter","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Advanced Editing","type":"text","marks":[{"type":"strong"}]},{"text":": CKEditor 5 can be integrated with the Full HTML Filter for users who need advanced content editing capabilities. It allows the use of complex HTML but with enhanced security features.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Security Enhancements","type":"text","marks":[{"type":"strong"}]},{"text":": CKEditor 5, when combined with the Full HTML Filter, maintains a higher level of security. It mitigates security risks by providing better filtering and validation of user input.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Customization","type":"text","marks":[{"type":"strong"}]},{"text":": CKEditor 5 offers extensive customization options for the Full HTML Filter, allowing administrators to define which HTML elements and attributes are allowed, further enhancing content control.","type":"text"}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"CKEditor 5 Table Styles","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1109,"id":"cfeec1e7-aaab-400f-b810-e89071d497dc","collection":"contentId-2469724161","type":"file","height":548}}]},{"type":"paragraph","content":[{"text":"Bootstrap is a popular front-end framework that provides a set of pre-designed styles and components to help you create responsive and visually appealing web applications. Out of the box, CKEditor5 did not have options for ","type":"text"},{"text":"Table Styles","type":"text","marks":[{"type":"strong"}]},{"text":". Here at Drupal ITS, we included several table styles Bootstrap provided: ","type":"text"},{"text":"table-striped","type":"text","marks":[{"type":"strong"}]},{"text":", ","type":"text"},{"text":"table-small","type":"text","marks":[{"type":"strong"}]},{"text":", ","type":"text"},{"text":"table-bordered","type":"text","marks":[{"type":"strong"}]},{"text":", and ","type":"text"},{"text":"table-responsive","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1109,"id":"019bfd46-3f29-420e-8381-21bf6cb02ed6","collection":"contentId-2469724161","type":"file","height":151}}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Table Striped","type":"text"}]},{"type":"paragraph","content":[{"text":"The table-striped class in Bootstrap adds zebra-striping to a table, which alternates the background color of rows to make the table easier to read.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Table Small","type":"text"}]},{"type":"paragraph","content":[{"text":"The table-small class in Bootstrap condenses the size of the table.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1109,"id":"25be9c6e-d41c-42b1-909f-3cf0cf7f9f8b","collection":"contentId-2469724161","type":"file","height":151}}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Table Bordered","type":"text"}]},{"type":"paragraph","content":[{"text":"The table-bordered class adds borders, making it visually distinct from the surrounding content.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Table Responsive","type":"text"}]},{"type":"paragraph","content":[{"text":"The table-responsive class makes tables horizontally scrollable on smaller screens to ensure the entire table is visible without the need for zooming or horizontal scrolling.","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"A table should only be wrapped by a registered parent div element in CKEditor5, such as ","type":"text"},{"text":"div.table-responsive","type":"text","marks":[{"type":"strong"}]},{"text":". Any other wrapper will break the ","type":"text"},{"text":"table toolbar","type":"text","marks":[{"type":"strong"}]},{"text":" in the CKEditor5 view. For a new table div wrapper, please contact Drupal ITS for further enhancements.","type":"text"}]}]},{"type":"codeBlock","content":[{"text":"

\n \n \n

","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"These Bootstrap table styles can be used individually or combined to enhance tabular data presentation in your web application.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Inline Images","type":"text"}]},{"type":"paragraph","content":[{"text":"It is recommended that you use Paragraph Bundles when dealing with content that has images, as your page’s layout will be more consistent. However, you can upload inline images directly inside CKEditor to add alongside body text.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Uploading Inline Images","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Available in Text blocks that load the CKEditor","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click on the Image button in the toolbar. ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Looks like a photo.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"You will be prompted to upload an image file.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Images must be smaller than 5 MB","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The alternative text field is required","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Align field is available to set how text wraps around the image","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Stylings and margins for image alignment will be improved in future CFW3 releases","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"You can make basic changes to an uploaded image by double-clicking on the image to bring up the Image Properties toolbar.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Available properties in this modal are very limited, and you will not have access to certain fields (width, height, class) as in CFW2.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Inline images uploaded in this manner are added to the files managed by Drupal","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Images are uploaded to an /inline-images directory on your website","type":"text"}]}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"When uploading an Inline image, CKEditor will add these attributes:","type":"text"},{"type":"hardBreak"},{"text":"data-entity-type=\"file\"","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"data-entity-uuid=\"random_string_of_characters\"","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"filename=\"filename.extension\"","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"These attributes are how Drupal ‘","type":"text"},{"text":"knows","type":"text","marks":[{"type":"em"}]},{"text":"’ if a file should be Temporary or Permanent. Temporary files are removed with an automatic cron job. If you remove these attributes, the image will be marked Temporary and still available until Drupal deletes your image with the next cron.","type":"text"}]},{"type":"paragraph","content":[{"text":"To check if a file is Temporary or Permanent, check for it on the ","type":"text"},{"text":"/admin/content/files","type":"text","marks":[{"type":"code"}]},{"text":" page.","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Inline Image Placement","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Hover over the image in the editor to locate the move handle in the image's upper left corner.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Your cursor will change to a move icon.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click, drag, and release the cursor to your desired location alongside your body text.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Resizing Inline Images","type":"text"}]},{"type":"paragraph","content":[{"text":"For the best results, it is recommended that your image is already saved at your desired size before you upload. However, you can resize your image in the editor.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Hover over the image in the editor to locate the resize handle found in the lower corner of the image itself.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Your cursor will change to a resize icon","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click, drag, and release the handle to your desired dimensions.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The modal Image Properties popup for an image ","type":"text"},{"text":"does not have width and height","type":"text","marks":[{"type":"strong"}]},{"text":" fields available due to a Drupal 9 limitation.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Any specific image dimensions must be made directly in the HTML source","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Aligning Inline Images","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Double-click on the image to bring up an Image toolbar.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Select one of the Align options: None, Left, Center, Right","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Stylings and margins for image alignment will be improved in future CFW3 releases","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Offsite Images","type":"text"}]},{"type":"paragraph","content":[{"text":"If you are embedding an image that has not been uploaded via CKEditor as above, you ","type":"text"},{"text":"will not benefit from CKEditor’s image toolbar and features","type":"text","marks":[{"type":"strong"}]},{"text":". This is due to Drupal 9’s CKEditor file management integration. ","type":"text"}]},{"type":"paragraph","content":[{"text":"You will not see any image handles, nor will you be able to bring up the Image toolbar.","type":"text"}]},{"type":"paragraph","content":[{"text":"All width, height, and placement edits must be made inside the source HTML. An example of an offsite image might be an image for a logo that isn’t hosted on your website or an image that was uploaded on a separate webpage.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Inline Files","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":601,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":601,"alt":"2024-03-05_15-07-06.png","id":"406c9c11-f788-468c-87ae-2e1048bea5e7","collection":"contentId-2469724161","type":"file","height":260}}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Uploading Inline Files","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"You should now see the Insert File button in the CKEditor5 toolbar when editing content.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Use the ","type":"text"},{"text":"Insert File","type":"text","marks":[{"type":"strong"}]},{"text":" button to upload and insert files. You can select a blank space in Ckeditor5 to designate the file location or highlight text, then select the ","type":"text"},{"text":"Insert File","type":"text","marks":[{"type":"strong"}]},{"text":" button to upload and insert files.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"You will then be prompted to upload a file.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Files must be smaller than 5 MB","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Allowed types: pdf doc docx xls xlsx txt.","type":"text"}]}]}]}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"When uploading an inline file, CKEditor5 will add these attributes:","type":"text"},{"type":"hardBreak"},{"text":"data-entity-type=\"file\"","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"data-entity-uuid=\"random_string_of_characters\"","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"href=\"filename.extension\"","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"These attributes are how Drupal ‘","type":"text"},{"text":"knows","type":"text","marks":[{"type":"em"}]},{"text":"’ if a file should be Temporary or Permanent. Temporary files are removed with an automatic cron job. If you remove these attributes, the image will be marked Temporary and still available until Drupal deletes your image with the next cron.","type":"text"}]},{"type":"paragraph","content":[{"text":"To check if a file is Temporary or Permanent, check for it on the ","type":"text"},{"text":"/admin/content/files","type":"text","marks":[{"type":"code"}]},{"text":" page.","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Replace File","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When replacing a file, select the text of the file you want to replace, you should now see the ","type":"text"},{"text":"File","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"Toolbar","type":"text","marks":[{"type":"strong"}]},{"text":" where there is a ","type":"text"},{"text":"Replace","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"file","type":"text","marks":[{"type":"strong"}]},{"text":" button.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Use the ","type":"text"},{"text":"Replace file ","type":"text","marks":[{"type":"strong"}]},{"text":"dialog window to ","type":"text"},{"text":"Remove","type":"text","marks":[{"type":"strong"}]},{"text":", then replace it with a new file. ","type":"text"},{"text":"You must upload a file.","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":420,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":420,"alt":"replace.png","id":"066bf83c-5c1a-40dc-a1a8-69a9cd7e1f85","collection":"contentId-2469724161","type":"file","height":317}}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Delete File","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When deleting a file, select the text of the file you want to delete, you should now see the ","type":"text"},{"text":"File","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"Toolbar","type":"text","marks":[{"type":"strong"}]},{"text":" where there is a ","type":"text"},{"text":"Delete","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"file","type":"text","marks":[{"type":"strong"}]},{"text":" button.","type":"text"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":577,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":577,"alt":"2024-03-06_13-53-58.png","id":"d398f2fe-a2e5-433c-a3a9-d08164af5ce7","collection":"contentId-2469724161","type":"file","height":244}}]},{"type":"paragraph"},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When the window prompts you, “Are you sure you want to delete this file?“ You can now either click ","type":"text"},{"text":"OK","type":"text","marks":[{"type":"strong"}]},{"text":" to accept or ","type":"text"},{"text":"Cancel.","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Inserting Bootstrap Icons and Font Awesome Icons","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"To use this functionality, your site must have either icon option (or both) enabled in your theme. See the image below for where these settings are located in your theme. If you need help enabling this, please contact the ITS Drupal Team.","type":"text"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":736,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":975,"alt":"2024-04-25_16-31-15.png","id":"f71a67b7-26ba-4fcc-84df-5eb22ec34315","collection":"contentId-2469724161","type":"file","height":305}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When inserting icons, you should hard code the icons by switching to ","type":"text"},{"text":"Source","type":"text","marks":[{"type":"strong"}]},{"text":" mode (Full HTML) in the CKEditor5 toolbar.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Once you are in ","type":"text"},{"text":"Source","type":"text","marks":[{"type":"strong"}]},{"text":" mode. You can now hard code any ","type":"text"},{"text":"Bootstrap Icon","type":"text","marks":[{"type":"strong"}]},{"text":" or ","type":"text"},{"text":"Font Awesome Icon","type":"text","marks":[{"type":"strong"}]},{"text":" by wrapping it with a

tag and ","type":"text"},{"text":"","type":"text","marks":[{"type":"em"}]},{"text":" tag and adding a %nbsp; inside the tag. See below for an example.","type":"text"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":597,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":597,"alt":"2024-04-25_16-26-57.png","id":"a5699f1a-c7d0-4d67-87b9-21dfc63bc151","collection":"contentId-2469724161","type":"file","height":278}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To verify they are ‘sticky’, switch back to WYSIWYG mode, and the icon should be visible. Then switch to Source again and make sure the code is there.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Note: If no text is present (ie, only an icon), CKEditor removes everything. We believe this ‘design’ feature in CKEditor does not allow empty content.","type":"text"}]},{"type":"paragraph","content":[{"text":"Note: The is required inside the tag, or CKEditor will remove the entire tag.","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"For more information on finding the right icon, please refer to the ","type":"text"},{"text":"Bootstrap Icons","type":"text","marks":[{"type":"link","attrs":{"href":"https://icons.getbootstrap.com/"}}]},{"text":" and ","type":"text"},{"text":"Font Awesome Icons","type":"text","marks":[{"type":"link","attrs":{"href":"https://fontawesome.com/"}}]},{"text":" libraries online.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Line Break and Empty Paragraph Handling in CKEditor 5","type":"text"},{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"In CKEditor5, the automatic insertion of
tags typically occurs due to the editor’s handling of line breaks and empty paragraphs. This behavior is part of the editor’s design to ensure proper formatting and a consistent user experience.","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"},{"text":"Three Reasons Why CKEditor5 does Automatic
Insertions:","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"type":"hardBreak"},{"text":"Empty Paragraph Handling","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"CKEditor5 often inserts
tags in empty paragraphs to maintain consistency and ensure that empty lines are rendered properly.","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"},{"text":"Soft Line Breaks","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"When users press ","type":"text"},{"text":"Shift+Enter, ","type":"text","marks":[{"type":"strong"}]},{"text":"CKEditor5 inserts a
tag to create a line break within the same paragraph rather than ending the paragraph.","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"},{"text":"Browser Compatibility","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"Different browsers handle empty elements and line breaks in varying ways. CKEditor5 uses
tags to standardize this behavior across all browsers.","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"},{"type":"hardBreak"}]},{"type":"paragraph"}],"version":1}

Browser not supported