CKEditor5

CKEditor is a widely-used WYSIWYG text editor for web applications. It offers different versions, with CKEditor 4 (CKEditor 4.x) and CKEditor 5 (CKEditor 5.x) being two of the most prominent ones. When using CKEditor with content management systems like Drupal, it's important to understand how these versions interact with the Basic HTML Filter and Full HTML Filter, which are commonly used for content filtering and security. This knowledge base page highlights the primary differences between CKEditor 4 and CKEditor 5 in conjunction with these filters.

CKEditor 5 and Basic HTML Filter

1. Modularity: CKEditor 5 is more modular and modern compared to CKEditor 4. It allows for easy integration with various filters, including the Basic HTML Filter.

2. Security: 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.

3. Customization: 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.

4. Accessibility: CKEditor 5 has improved accessibility features out of the box, making it a better choice for ensuring that content created is accessible to all users.

CKEditor 5 and Full HTML Filter

1. Advanced Editing: 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.

2. Security Enhancements: CKEditor 5, when combined with the Full HTML Filter, maintains a higher level of security compared to CKEditor 4. It mitigates security risks by providing better filtering and validation of user input.

3. Customization: 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.

CKEditor 5 Table Styles

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 Table Styles, unlike CKEditor4. Here at Drupal ITS, we included several table styles provided by Bootstrap, including table-striped, table-small, table-bordered, and table-responsive.

Table Striped

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.

Table Small

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.

Table Bordered

The table-bordered class adds borders to the table, making it visually distinct from the surrounding content.

Table Responsive

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.

<div class="table-responsive">
  <table class="table" data-responsive="enabled">
    <!-- Your table content goes here -->
  </table>
</div>

Inline Images

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 do have the ability to upload inline images directly inside of CKEditor to add alongside body text.

Uploading Inline Images

• Available in Text blocks that load the CKEditor

• Click on the Image button in the toolbar. 

  • Looks like a photo.

• You will be prompted to upload an image file.

  • Images must be smaller than 5 MB

• Alternative text field is required

• Align field is available to set how text wraps around the image

  • Stylings and margins for image alignment will be improved in future CFW3 releases

• You can make basic changes to an uploaded image by double-clicking on the image to bring up the Image Properties toolbar.

  • Available properties in this modal are very limited and you will not have access to certain fields (width, height, class) as in CFW2.

• Inline images uploaded in this manner are added to the files managed by Drupal

• Images are uploaded to an /inline-images directory on your website

Inline Image Placement

• Hover over the image in the editor to locate the move handle found in the upper left corner of the image itself.

• Your cursor will change to a move icon

• Click, drag, and release the cursor to your desired location alongside your body text

Resizing Inline Images

For the best results, it is recommended that your image is already saved at your desired size before you upload. However, you are able to resize your image in the editor.

• Hover over the image in the editor to locate the resize handle found in the lower corner of the image itself.

• Your cursor will change to a resize icon

• Click, drag, and release the handle to your desired dimensions.

• The modal Image Properties popup for an image does not have width and height fields available due to a Drupal 9 limitation

• Any specific image dimensions must be made directly in the HTML source

Aligning Inline Images

• Double-click on the image to bring up an Image toolbar.

• Select one of the Align options: None, Left, Center, Right

  • Stylings and margins for image alignment will be improved in future CFW3 releases

Offsite Images

If you are embedding an image that has not been uploaded via CKEditor as above, you will not have the benefit of CKEditor’s image toolbar and features. This is due to Drupal 9’s CKEditor file management integration. 

You will not see any image handles, nor be able to bring up Image toolbar.

All edits to the width, height, and placement must be made inside the source HTML itself. 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 of your website.

Inline Files

You do have the ability to upload inline files directly inside of CKEditor to add alongside body text.

Uploading Inline Files

• Available in Text blocks that load the CKEditor

• Click on the File button in the toolbar. 

  • Looks like a paperclip.

• You will be prompted to upload a file.

  • Files must be smaller than 15 MB

  • Allowed types: pdf doc docx xls xlsx zip csv ppt pptx

• The Title field is only used for the advisory title of the link to the file

  • Title is not the link text that will be used inside the editor

• Clicking Save will insert a link to the file inside of the editor

• The inserted link will use the name of the file as its text by default

  • Editing this link text can be tricky, as Drupal wants to keep a relationship to the file that was uploaded.

  • If you want to change this text, it is recommended that you do so in the HTML source.

• If you want to use specific text for the file link, highlight the desired link text in the editor you want to link before uploading the file.

  • Then follow the steps above

  • The text you highlighted should now be linked to the file you uploaded

• Inline files uploaded in this manner are added to the files managed by Drupal

• Files are uploaded to an /inline-files directory on your website

CKEditor 5 Editor File Upload

Insert File

• When editing content, you should now see the Insert File button in the CKEditor5 toolbar.

• Use the Insert File button to upload and insert files.
  

  

Replace File

• When replacing a file, select the text of the file you want to replace, you should now see the File Toolbar where there is a Replace file button.

• Use the Replace file dialog window to remove then replace with a new file.
  
  

  

Delete File

• When deleting a file, select the text of the file you want to delete, you should now see the File Toolbar where there is a Delete file button.

• When the window prompts you to “Are you sure you want to delete this file?“ You can now either click ok to accept or cancel.