Drupal 10 introduced a new version of the editing toolbar. In Drupal 9, CK4 Editor (referred to as the WYSIWYG Editor) was used. The new version is labeled "CK5 Rich Text Editor". Editors will have the option to use the new toolbar or switch back to the old CK4 WYSIWYG edit toolbar. Currently, the CK5 Editor has limitations. The ability to continue to use both is temporary until full functionality in CK5 Rich Text Editor is achieved.

Editing toolbars are available for body content and most custom blocks. Hovering over a toolbar icon will display a descriptor of its function. Just like with the WYSIWYG editor (CK4), there are two options for CK5, depending on your permission level. Editors and Builders will have access to "CK5 Rich Text Editor" and "CK5 Rich Text Editor with Source". Those with the contributor role will only have access to "CK5 Rich Text Editor". 

Toolbar icons

Top Row

• B - highlight text and click the B icon to make it bold
• I - highlight text and click the I icon to make it italic
• U - highlight text and click the U icon to make it underline
• S - highlight text and click the S icon to insert a strikethrough
• x₂ - place cursor where you want subscript added and click icon
• x² - place cursor where you want superscript added and click icon
• T_x - Removes formatting from content. This is helpful when copying text from a Word document that has spans, divs, and other formatting that is not necessary, useful, brand acceptable, or accessible. Highlight all content that you want to remove formatting from, then click on this button in the toolbar.  
• Alignment - Use the drop down to select left, center, right, or justified alignment. Keep in mind that accessibility issues may arise using center or justified alignment too often due to cognitive disabilities. 
• Undo - This will undo last actions. Most of the time it will cover all actions from one editing period, but it is dependent on how many actions conducted.
• Redo - This will redo anything undone up until the last point.
• Omega Symbol - Access to a menu with special characters such as accents and symbols. *New* - Filtered by currency, text, mathematical, arrows, and latin. 

Bottom Row

• Insert/remove bulleted list
• Insert/remove numeric list.  *New* - Can start at any number and reverse order. 
• Decrease Indent - selectable when using bullets
• Increase Indent - selectable when using bullets
• Chain Link - Insert links for both internal and external content. This will search matches for internal content such as pages and media. Insert email addresses, add anchor points, and allow for opening in another tab. CSS, Aria labels, relationships, and IDs can also be added. Highlight what you want linked and then click the chain link button in the toolbar for best results. 
• Table - Insert a table. Note that tables should only be used for tabular data and not for formatting. Tables are not SEO friendly and can cause accessibility issues if they are not used properly. Once a table is created, when cursor is placed in a table cell, table icons will appear: add/remove column, add/remove row, merge/split cell, toggle caption on, cell properties, table properties. It is suggested that a width of "100%" be added to the table properties. 

• Insert Horizontal Line - Will insert a thin visual line that breaks up content. This is handy for adding multiple images that are left or right aligned with text that corresponds to each image. It prevents that "bunched up" look. It also breaks up content nicely in separate divs.
• Block Quote - Apply the block quote style to a piece of content by placing your cursor and selecting the quote icon on the toolbar. This will pull in the text and change the style including adding a line on the left. 
• Media Browser (star icon) - This icon opens the media browser, or media library. This is what to use when inserting an image or video that was placed in the media library. If the image has not yet been uploaded to the library, you'll have a chance to upload now. Once uploaded, you can place the image within the editor. Keep in mind that wherever your cursor was is where the image will be placed.  Learn more about media files.  
• Paragraph dropdown - Formats text for paragraph and headings (These are no longer available in CK5: address and formatted.)
• Styles dropdown - This is contextual, which means it changes dependent upon where your cursor is placed. Apply pre-created styles to your content such as buttons to links, different bullet styles, table styles, and more. 
  Note: This displays and works a little differently than before. All styles are shown but ones that can't be used (depending where your cursor is on your content) will be greyed out. You are now able to see a preview of what the style will look like. 
• Full Screen (aka Maximize) - Toggle to view the editor in full screen mode. 

CK5 Rich Text Editor with Source (available to editors and builders)

• Source - Work directly with source code. It will be necessary if you are embedding any scripts such as from the Profiles or Events applications. 
• Insert Code Block - This replaces the "formatted" option offered in the paragraph dropdown in CK4. Display a block of code on a page for purposes of tutorials. You can even select which programming language the code block is written in. 

What's Missing?

You may have noticed that not all features are available in CK5 yet. We are working on that! In the meantime, you can switch toolbars if necessary. 

Working on bringing back...

• Text Color - Change the color of text to stand out or necessary for accessibility when using a callout or button. We will be bringing with it new color options based on the updated brand guide! 
• Background Color - Change the color behind text as a highlight or necessary for accessibility. We will be brining with it new color options based on the updated brand guide! 

Lower priority to bring back...

• Markdown - We found this isn't commonly used. However, let us know! 
• Show Blocks - This will place dashed boxes around each piece of content in the editor and display its tag.

Not bringing back...

• Cut, Copy, and Paste functions - These options are a bit obsolete since copy & paste exist as shortcuts in various ways on your own computers and phones. Also, there is a remove formatting tool that will help ease the transition of bringing over text you need to clean up. 

Switching Text Formats

To switch between text formats, located at the bottom of the edit window, there is a label for "Text format" with a dropdown of options. 

The new editors are labeled with "CK5" at the beginning, the older version of CK4 only have "Rich Text Editor" in the name. If you are an editor or builder, you will have four options: CK5 Rich Text Editor, CK5 Rich Text Editor with Source, Rich Text Editor (Limited), Rich Text Editor (Source). If you are a contributor, you will have two options: CK5 Rich Text Editor and Rich Text Editor (Limited).