USWDS Ckeditor Integration

INTRODUCTION With the USWDS library (https://designsystem.digital.gov/) becoming a requirement for government websites thought it would be useful to have some integration with the ckeditor. The primary goal is to make it easy for a user to utilize and inject USWDS classes and components directly into the ckeditor without opening up the source.

NOTE:CKEditor4 is EOL end of 2023 so the plugins for those will be less supported to better prepare for CKEditor5

This module will provide 2 Example USWDS text profiles


* USWDS Ck5
* USWDS

For a full description of this module, visit the project page: See https://www.drupal.org/project/uswds_ckeditor_integration

To submit bug reports and feature suggestions, or track changes: See https://www.drupal.org/project/issues/uswds_ckeditor_integration

FEATURES CKEditor5 Integration (2.x branch)

* Introducing CKEditor5 Embedded Content
* Accordion
* Alerts
* Process List
* Summary Box


* USWDS Overrides
* Default class for links, lists, and tables


* USWDS Table Attributes See https://designsystem.digital.gov/components/table/
* Add abiity to make tables borderless, scrollable, stackable/responsive, and sortable with USWDS classes.



CKEditor4 (1.x branch)
These are the old plugins


* Using CKEditor Templates
* Summary Box
* Process List


* Accordions button
* Alerts button
* Grid layout
* Table properties
* Add abiity to make tables borderless, scrollable, stackable/responsive, and sortable with USWDS classes.


* Submodule for integrating with paragraphs_entity_embed

REQUIREMENTS 1.x branch


* PHP > 7.4
* Ckeditor4 module (core or contrib)
* USWDS Library (Recommend following steps for see https://www.drupal.org/project/uswds_base)
* For Ckeditor Templates to work you will need to include the templates' plugin. See Drupal page for how to install.
* For USWDS Paragraphs profile to work you will need https://www.drupal.org/project/uswds_paragraph_components.

2.x branch


* PHP > 8
* Ckeditor5 module (core)
* USWDS Library (Recommend following steps for see https://www.drupal.org/project/uswds_base)

INSTALLATION Install as you would normally install a contributed Drupal module. Visit: https://www.drupal.org/docs/extending-drupal/installing-drupal-modules for further information.

CONFIGURATION Each component requires specific configuration

CKEditor5 Integration (2.x branch) Filtering is automatic with ckeditor5.


* CKEditor5 Embedded Content
* Move button into ckeditor


* Accordion button
* Move button into ckeditor


* USWDS Overrides
* Configuration option in editor. Check each option you wish to apply.


* USWDS Table Attributes
* Configuration option in editor. Check if you want to apply.
* Enable USWDS Stacked Table Attributes CK5 filter.
* May need to add "div" to sourc editing section.



CKEditor4 (1.x branch) If filtering HTML be sure to include the following

<a href <span class="hljs-class"><span class="hljs-keyword">class</span>> <ul <span class="hljs-title">type</span> <span class="hljs-title">class</span>> <ol <span class="hljs-title">class</span>> <li <span class="hljs-title">class</span>> <table <span class="hljs-title">class</span>> <tbody> <thead> <tfoot> <th <span class="hljs-title">data</span>-<span class="hljs-title">sortable</span> <span class="hljs-title">scope</span> <span class="hljs-title">role</span> <span class="hljs-title">data</span>-<span class="hljs-title">label</span>> <td <span class="hljs-title">role</span> <span class="hljs-title">data</span>-<span class="hljs-title">label</span>> <tr <span class="hljs-title">scope</span> <span class="hljs-title">class</span>> <div <span class="hljs-title">class</span>></span>
* Accordion
* Go to the text profile you wish to include USWDS accordions.
* Move the Accordion button into the toolbar.


* Alerts
* Go to the text profile you wish to include USWDS alerts.
* Move the Alert button into the toolbar


* Grid
* Go to the text profile you wish to include USWDS grid templates.
* Move the grid button into the toolbar.


* Lists
* Go to the text profile you wish to override <ul> and <ol> lists
* In the Ckeditor USWDS Overrides tab
* Check Override Lists


* Summary Box / Process List
* Go to the text profile you wish to include ckeditor templates
* Move the templates button into the toolbar.


* Table
* Go to the text profile you wish to include USWDS table.
* Under "CKEditor plugin settings" make sure "Override table plugin with USWDS" is checked. By default, it will be.
* If you want to use USWDS table stacked click "USWDS Stacked Table Attributes" filter