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 knowledgebase page highlights the primary differences between CKEditor 4 and CKEditor 5 in conjunction with these filters.

CKEditor 4 and Basic HTML Filter

1. Compatibility: CKEditor 4 is integrated with Drupal's Basic HTML Filter by default, making it suitable for users who require a simpler content creation experience.

2. Security: CKEditor 4, when combined with the Basic HTML Filter, provides a moderate level of security. It restricts users from adding potentially harmful HTML elements, limiting the risk of security vulnerabilities.

3. Feature Set: CKEditor 4 offers a rich set of features for content editing, including basic formatting, lists, and media embedding. It provides a familiar toolbar interface with various options.

4. Customization: CKEditor 4 allows some customization of the toolbar and plugins. However, it may require more advanced configuration for fine-tuning.

CKEditor 4 and Full HTML Filter

1. Advanced Features: CKEditor 4 is commonly used with the Full HTML Filter to allow more advanced content creation, as it doesn't restrict users from using complex HTML and JavaScript.

2. Security Risks: When paired with the Full HTML Filter, CKEditor 4 opens up the possibility of security risks, as users can insert potentially malicious code or scripts. Careful content moderation is necessary to mitigate these risks.

3. Full Customization: CKEditor 4 offers a high degree of customization with the Full HTML Filter, making it suitable for users who need a versatile content creation tool with full control over their content.

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>