Some fields in YMCA Website Services allow you to format your text with a WYSIWYG (What You See Is What You Get) editor. These editors are typically CKEditor 5 instances and provide various text formatting options.
This tool allows you the flexibility to format content however you want within a certain container or area.
Bundled with the Drupal core and the distribution,
CKEditor provides a number of different buttons for styling and formatting, as well as a Source editor if you are so inclined to edit HTML directly.
CKEditor has been
upgraded to version 5 as of Drupal 10 and is a significant improvement over CKEditor 4. The linking experience is much smoother, uploading images is faster, and it offers a more modern user interface.
The specific toolbar configuration may vary depending on the text format being used (e.g., Basic HTML, Full HTML). Here’s a general overview of available features:
Links are simple in YMCA Website Services. Highlight your text, then click the link icon (🔗) in the editor toolbar, or use the keyboard shortcut Ctrl + K (Windows) or Cmd + K (Mac). In the pop-up window, type or paste your URL into the field and click Save.
The link dialog’s Advanced options let you add attributes to links, including a title (tooltip), id, and CSS classes. You can also configure the link to open in a new browser window or tab.
The
Button editor that existed in CKEditor 4 has
changed with CKEditor 5 and Drupal 10. Content editors can now add button classes directly through the Advanced Link Options. This allows for more flexible button styling using
Bootstrap classes.
To create a button:
Create a regular link in a Layout Builder block or Text Editor.
We recommend using custom buttons primarily within larger text blocks, such as those found in the
Table or
Code blocks.
Open the Advanced options for the link.
In the CSS Classes field, add the desired button classes for Color, Size, and Style (see
Button Classes). Always begin with the btn prefix.
For example: btn btn-primary.
Button styles displayed in the editor might not precisely match the final rendered styles on the live site.
Any button’s CSS classes should begin with btn to establish the base button styles.
Choose a button style, such as btn-primary or btn-light.
Generally, button styles should not be combined.
Our theme may override some default Bootstrap styles.
The btn-primary style will adopt the selected colorway’s color. Other styles might use non-compliant colors.
The CSS classes field should contain at least two space-separated items, like btn btn-primary.
It is recommended to experiment with different styles and verify the button’s appearance before saving the page.
Anchor Links
For long landing pages, anchor links (also known as “in-page” links or
URI fragments) allow users to jump directly to specific sections.
The process consists of two steps:
Adding an in-page anchor.
Creating a link to that anchor.
Adding an Anchor
An anchor is a point on the page designated with an id attribute in its code. The easiest way to create an anchor is to add a small, hidden link at the beginning of the target section.
Edit the section where you want to add the anchor.
Insert an empty space at the end of the section’s first line.
Select only that space, and click the 🔗 button in the editor toolbar.
In the Link popup, set the URL to #.
Expand the Advanced options and set the ID field to a short, descriptive name containing only lowercase letters and dashes (e.g., thank-you or adding-an-anchor).
Click Save in the Link popup, then save the page.
After saving, you can test the anchor by appending #anchor-id to your page URL. For example:
Entering this URL in your browser should navigate directly to the “Adding an Anchor” section.
Linking to the Anchor
To create a link to the anchor:
Create an in-page link using the Link field or the Text Editor as you normally would.
Instead of using autocomplete (if available), use the “relative path” of the page—everything after the domain. For example, to link to this page, use /docs/user-documentation/text-editor/adding-links.
Append the anchor ID to the path, so the complete link looks like /docs/user-documentation/text-editor/adding-links#adding-an-anchor.
Save the page.
The internal link should now direct users to the specified location within the page.
Tip: If the anchor doesn’t position the section correctly, or the navigation obscures the linked section, try moving the anchor to the end of the preceding section. This ensures the target section is fully visible.
Linking Tips
Internal Links: Use relative paths. Omit everything before the first / after your domain (e.g., .com, .org). For ymca.org/about, use /about. This improves analytics tracking.
External Links: Use the complete URL, including https:// (e.g., https://example.org/about).
Email Links: Use the format mailto:example@example.org.
To update a link, click the linked text, then click the link icon, or use the popup options (in CKEditor 5).
To remove a link, highlight the linked text and click the unlink icon.
provides an autocomplete interface for internal and external linking in rich-text editors. Linkit supports nodes, users, taxonomy terms, files, comments and basic support for all types of entities that define a canonical link template.
Once your site is updated to use CKEditor 5 you will see a new Insert Media button that unifies the processes for embedding Images, Documents, and Videos.
Add or select media
To get started, click Insert Media in the CKEditor toolbar (or try the ⋮ button if it’s hidden). You will be presented with the Add or select media dialog.
Choose the media type (Image, Document, etc.) that you would like to embed from the list on the left.
Add or upload your media:
If you are adding new media:
If given the option, drag and drop the item from your filesystem to the dialog, or click Select File.
For Video (via YouTube or Vimeo), add the video directly via Admin > Content > Media > Add Media > Video before opening the dialog.
If you are reusing media that exists on the site, scroll down and search for the item, then click the checkbox to select it.
Choose Insert selected to embed the chosen media.
Customizing your media
Once your media has been inserted into the field, you can hover over the media to choose from a variety of options.
Toggle caption on
Displays a Caption area below your image. Once toggled, type your caption below the image.
Link media
Allows the media to be linked. See
Adding Links for more information.
Allows you to select the size of the image. Typically you might choose “Full”, “Half”, or “Thumbnail”. Options may vary depending on site configuration.
Alignment
Choose how to align the media:
Break text
Align left and wrap text
Align center and break text
Align right and wrap text
Moving your media
Click and drag anywhere on the inserted media to relocate it in the WYSIWYG area.
Use the ⮐ button at the top or bottom of the media to insert a paragraph before or after it.
Deleting your media
Click to select the media, then type Delete to remove it.
3 - Basic Text Formatting
Choose any of the options for your text below by clicking on the icon or performing the keyboard shortcut indicated. To format text you’ve previously typed, highlight the text and then click on the button in the editor. Many formatting options also have
keyboard shortcuts.
Heading - Set paragraphs or heading levels—headings in your content
should be ordered sequentially for the best accessibility.
Code Block - For inserting multi-line code snippets. Supports syntax highlighting for various languages (Plain text, C, C#, C++, CSS, Diff, HTML, Java, JavaScript, PHP, Python, Ruby, TypeScript, XML).
Source - View or edit the source code of the content. Be aware that some HTML tags may be stripped out due to Drupal’s Text Format rules. Click About text formats below the editor to learn more.
Bold Text - Ctrl+B (Windows) or Command (⌘)+B (Mac) or clicking/unclicking the B icon
Italics -Ctrl+I (Windows) or Command (⌘)+I (Mac) or clicking/unclicking the I icon
Underline -Ctrl+U (Windows) or Command (⌘)+U (Mac)or clicking/unclicking the U icon
Strikethrough - Clicking/unclicking the S icon
Alignment controls - Left, Center, Right, and Justify.
Font Color - A small grid of swatches you can apply to your text. Overrides the default font-color
Text Background color (not recommended)
Font (should remain Cachet or Verdana to conform to YMCA brand standards)
Font Size - A dropdown to select the size of your text. Measured in points, not pixels. Overrides the default font size for your text, including styles and format.
Indent - Add one or more indents to your copy. Also, have the option to undo the indent.
Format - A dropdown list of text formats you can apply to your content. Helps to create sections. Comes out-of-the-box with six heading formats.
Most Ys will not use the “Formatted” format, which styles text like HTML code.
Bulleted/Numbered lists - Click the numbered or bulleted list icon to create a list. You can create indented bullets by hitting your tab key or clicking on the indent icon
4 - Building Buttons
This document applies to the legacy WYSIWYG editor, CKEditor 4. See the
Using Button Classes for updated instructions on creating buttons using CSS classes in the current editor.
As an alternative to using the link tool, you can create buttons with YMCA Website Services using the button editor in CKEditor 4. When you click the button icon, a pop-up window will appear.
You can also edit a button you’ve created previously by clicking on the link within the text editor.
The button editor has three tabs: Info, Target, and Icons.
Info Tab
This tab provides basic styling options for your button or link. The Style Option dropdown menu in the top-left corner allows you to style your button or output it as a plain link.
Link: Embeds your link text inline within a paragraph.
Button Styles: The appearance of the button styles depends on your website’s theme:
Lily: All button styles other than “Link” default to purple.
Rose: All options except “Default” will output a blue button. “Default” outputs a white button.
Carnation: The button options all output different colors.
Button Style Guide Example:
@mlefler From the YMCA of Lincoln, NE,
built this guide to provide examples of possible styles for buttons. Consult your developer or designer for a style guide specific to your YMCA website.
The Size dropdown menu in the top-right corner offers four options for your button size. If you select the “Link” style option, the Size option will not affect your link’s appearance.
Add the text for your link/button in the bottom-left Text field. Enter the destination URL in the URL field on the bottom right.
Internal Links (links within your website): Use a relative path, starting with a / after your domain.
For example, to link to example.org/about, enter /about. This is called a relative path and helps with analytics tracking.
External Links (links to other websites): Use the full URL, including https://.
For example, to link to example.org/about, enter https://example.org/about.
Email Links: Use the mailto: prefix followed by the email address.
This tab allows you to control the link’s behavior when clicked. By default, all links have a “Not Set” behavior, which means the link opens in the same tab. The other options include:
You can add icons to your buttons or links using the Icons tab. Use the Left Icon and Right Icon text fields to integrate icons from the Font Awesome library.
Example: To display a right-facing chevron, type fa-chevron-right in the Right Icon text field.
Note: The left fields reference the Bootstrap Glyphicons library. This icon library has been deprecated, and the Glyphicons fields will not function correctly in YMCA Website Services. These fields will be removed once the code is updated by the tool’s maintainer.
5 - Building Tables
Display contact information, pricing tables, and more using flexible, responsive tables.
Tables in CKEditor 5
The table editor has been drastically improved in CKEditor 5 and is described in detail
in their documentation.
Adding a New Table
To add a table, click on the table icon in the toolbar. A grid will appear, allowing you to select the desired number of rows and columns.
Alternatively, you can use the dropdown menu to insert a table. This option might offer more advanced configurations and properties directly upon insertion.
Table Properties
To adjust the table’s overall appearance and structure, access the “Table Properties” option. This can usually be found by right-clicking on the table.
The properties dialog typically allows you to configure:
Dimensions: Setting the number of rows and columns.
Width & Height: Defining the table’s size. You can specify these in pixels or percentages. Percentages are generally recommended for responsive layouts.
Borders: Adjusting the border size, style, and color.
Background: Changing the background color of the table.
Alignment: Positioning the table within the content.
Caption: Adding a descriptive caption that appears above or below the table.
Summary: Providing a brief description for screen readers to enhance accessibility.
Editing the Table
To edit a table after you’ve built one, right-click on the table to bring up a contextual menu with options such as:
Table Properties: Opens the table properties dialog.
Row: Options to insert, delete, or manage rows.
Column: Options to insert, delete, or manage columns.
Cell: Options to insert, delete, merge, split, or manage individual cells.
You can also double-click inside a table cell to edit its content.
Adding Rows/Columns
To add a row or column, right-click on the table and navigate to either “Row” or “Column” in the options that appear. You can insert a row or column before or after the current row/column.
Deleting Rows/Columns
Both the row and column options allow you to delete from the right-click menu as well. Just right-click > Row or Column > Delete Row OR Delete Column.
To delete multiple rows or columns, just highlight the rows or columns you want to delete and then right-click and select the delete option.
Formatting Individual Cells/Groups of Cells
The “Cell” option from the right-click menu gives you same options as Row and Column, including inserting cells and deleting cells. You can also merge cells or split cells as you would in an excel table by selecting those options from the right-click menu.
Cell Properties
The “Cell Properties” option allows you to style your cells. Just right-click > Cell > Cell Properties.
This opens a dialogue box similar to the table properties. You can set the width/height for your cell (pixels only for height; pixels or percentages for your width) in the fields on the left.
Text Wrapping: Choose from a dropdown whether or not to wrap the text in a cell.
Alignment: Use dropdowns to set your vertical and horizontal alignments for your cells.
Colors: Set your border and background colors for your cells. These field support hexadecimal (#FFF) and rgba (256,256,256,1.0) color formats.
Span: Edit your cells to “span” two or more rows or columns. For example, if you have a header cell you want to span two columns, you can set the “Columns Span” field to 2.
If you would like to apply these styling options to multiple cells, just highlight the cells you want to edit and Right-Click > Cell > Cell Properties.
Table Examples
To see an example of what a table might look like on your site, open the “Source” tab on your text editor and insert the HTML. You can then edit the content inside using the WYSIWYG text editor.
Pricing Table
<h2>Registration and Pricing</h2><tablealign="left"border="1"cellpadding="5"cellspacing="1"style="width: 500px;"><caption>*A $25 deposit is due at the time of registration.</caption><thead><tr><thscope="col">Pricing Period</th><thscope="col">Dates</th><thscope="col">Member Pricing</th><thscope="col">Non-Member Pricing</th></tr></thead><tbody><tr><td>Early Registration</td><td>Feb. 1-29</td><td>$120/week</td><td>$135/week</td></tr><tr><td>Regular Registration</td><td>March 1-May 1</td><td>$130/week</td><td>$150/week</td></tr><tr><td>Late Registration</td><td>May 1-End of Summer</td><td>$150/week</td><td>$175/week</td></tr></tbody></table>
Camp Locations
<style>/* To achieve the full effect of this table, insert this style tag above the table or insert it into the CSS Editor module. *//* margin fix for h6 embedded inside table */td>h6{margin-bottom:0;}/* Fix for mobile table -> issue seems to be related to aggregate CSS file */.field-answertr,.field-answertd,.paragraph--type--simple-contenttr,.paragraph--type--simple-contenttd{display:block!important;border:none;}.field-answertd,.paragraph--type--simple-contenttd{padding:.75rem.31rem;text-align:left;vertical-align:middle;}.field-answertr,.paragraph--type--simple-contenttr{padding:.625rem0;}.field-answerthead,.paragraph--type--simple-contentthead{display:none;}@media(min-width:992px){.field-answertr,.paragraph--type--simple-contenttr{display:table-row!important;}.field-answertd,.paragraph--type--simple-contenttd{display:table-cell!important;}.field-answerthead,.paragraph--type--simple-contentthead{display:table-header-group;}}</style><divclass="table-responsive"><tablealign="left"cellpadding="10"cellspacing="10"class="w-100 table table-striped"><thead><tr><thscope="col"><h5>Center</h5></th><thscope="col"><h5>Address</h5></th><thscope="col"><h5>Contact</h5></th><thscope="col"><h5>Schedule (PDF)</h5></th><thscope="col"> </th></tr></thead><tbody><tr><td><h5>Bellevue</h5></td><td>8101 TN-100<br/> Nashville, TN 37221</td><td><ahref="tel:615-646-9622">615-646-9622</a></td><td><p><ahref="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-bellevue-menu.pdf"><iclass="far fa-file-pdf"> </i>Print Info</a></p></td><td><strong><aclass="btn btn-outline-primary"href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&location_ids=B58&category_ids=TAG12062">Register ></a></strong></td></tr><tr><td><h5>Brentwood</h5></td><td>8207 Concord Rd.<br/> Brentwood, TN 37027</td><td><ahref="tel:615-373-9622">615-373-9622</a></td><td><ahref="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-brentwood-menu.pdf"><iclass="far fa-file-pdf"> </i>Print Info</a></td><td><strong><aclass="btn btn-outline-primary"href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&location_ids=B45&category_ids=TAG12062">Register ></a></strong></td></tr><tr><td><h5>Clarksville</h5></td><td>260 Hillcrest Dr.<br/> Clarksville, TN 37043</td><td><ahref="tel:931-647-2376">931-647-2376</a></td><td><ahref="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-clarksville-menu.pdf"><iclass="far fa-file-pdf"> </i>Print Info</a></td><td><strong><aclass="btn btn-outline-primary"href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&location_ids=B54&category_ids=TAG12062">Register ></a></strong></td></tr><tr><td><h5>Donelson</h5></td><td>3001 Lebanon Pike<br/> Nashville, TN 37214</td><td><ahref="tel:615-889-2632">615-889-2632</a></td><td><ahref="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-donelson-menu.pdf"><iclass="far fa-file-pdf"> </i>Print Info</a></td><td><strong><aclass="btn btn-outline-primary"href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&location_ids=B41&category_ids=TAG12062">Register ></a></strong></td></tr><tr><td><h5><a>Franklin</a></h5></td><td>501 S Royal Oaks Blvd.<br/> Franklin, TN 37064</td><td><ahref="tel:615-591-0322">615-591-0322</a></td><td><ahref="/sites/default/files/2020-01/dycmp-20-dycmp-pdf-franklin-menu.pdf"><iclass="far fa-file-pdf"> </i>Print Info</a></td><td><strong><aclass="btn btn-outline-primary"href="https://operations.daxko.com/Online/4002/ProgramsV2/Search.mvc?program_id=TMP8151&location_ids=B53&category_ids=TAG12062">Register ></a></strong></td></tr></tbody></table>
6 - CKEditor 4: Adding and Embedding Videos
This document applies to the legacy WYSIWYG editor, CKEditor 4. See
Adding Media for updated instructions on using the CKEditor 5 media embedding features.
Adding/Embedding Videos with the YMCA Website Services Text Editor
YMCA Website Services allows you to upload and embed videos directly into a block of text, either from a supported external source (like YouTube or Vimeo) by pasting the video URL or from the YMCA Website Services media library.
Adding Videos from an External Source
Click the Embed media button (usually a filmstrip icon) in the text editor toolbar.
In the Source URL field, paste the URL of the video you want to embed.
Hit Save to embed the video. The editor will automatically generate a preview of the video.
Adding Videos from the Media Library
Click the Media button (if available, may look like an image icon or filmstrip) in the text editor toolbar.
In the Media library popup, select the video you want to embed.
(Optional) Configure the video’s display settings.
Click Embed or Insert to add the video to your content.
Configuring Video Display Options
After embedding your video, you may be able to adjust additional options. Note: These options depend on the configuration of your specific YMCA Website Services instance and may not all be available.
Entity Name: This field displays the name of your video.
Display as: This setting controls the size and appearance of the video within your content area. Available options might include:
Full: The video will fill the width of its container.
Half: The video will take up half the width of its container.
Link: The video will be displayed as a text link to the video file.
Link to: This option wraps the video in a link, allowing you to specify a destination URL that users will be directed to when they click on the video.
Align: Use this setting to float the video to the left, right, or center of the page, allowing text to wrap around it.
Caption: Adds a descriptive caption below the video.
When you are satisfied with the video’s settings, click Embed.
If you want to make changes to the video you just embedded after you’ve added it, double click on the video placeholder in the editor, and the “Embed media” dialogue will appear.
7 - CKEditor 4: Adding Images
This document applies to the legacy WYSIWYG editor, CKEditor 4. See
Adding Media for updated instructions on using the CKEditor 5 media embedding tool.
Adding Images with the YMCA Website Services Text Editor
YMCA Website Services allows you to upload and embed images directly into a block of text, either from your computer or from the YMCA Website Services media library.
Uploading Images
To add an image, click on the image button in the text editor toolbar.
Make sure you’re on the “Upload Images” tab.
Next, either drag your image into the upload area or click the button to select an image from your library.
Name your image, tag it, and write your alt description.
Hit “Save” to go through to the next step.
Adding Images from the Media Library
To add an image from the library, click on the image icon in the text editor toolbar.
Next, click on the tab that says “All Images”
Name your image, tag it, and write your alt description.
Hit “Save” to go through to the next step.
Sizing and Floating Your Images
After you save your image to the media library, a dialogue box will appear, giving you some additional options for embedding your image inline.
Entity Name simply refers to the name of your image, which you provided on the previous screen.
Display as allows you to change the size of the image display without affecting the size of the original image. By default, YMCA Website Services comes with Full, Half, and Link display modes.
Full means your image fills the area where it’s inserted.
Half means the picture is half the size of its area.
Link outputs the image as a simple link to the picture.
Link to wraps the image in a link so that when users click on it, it goes to another page.
Align allows you to float an image to the center or either side of the page.
Caption outputs a caption below the image.
When you’re ready to embed the image, just click “Embed.” You can also click the back button on the bottom to choose a different image.
If you want to make changes to the image you just embedded after you’ve added it, double click on the icon, and the “Embed media” dialogue will appear.
This document applies to the legacy WYSIWYG editor, CKEditor 4. See
Adding Media for updated instructions using CKEditor 5.
YMCA Website Services allows you to upload and embed documents directly into a block of text, either from your computer or from the YMCA Website Services media library and browser.
## Adding Documents
* To add a document, click on the document button (usually represented by a paperclip or document icon) in the text editor toolbar.
* Make sure you're on the *"Add Document"* or *"Upload"* tab.
* Next, name your document.
* Paste the document URL into the appropriate field, or upload the document from your computer.
* Hit "Save" to proceed.
## Adding Documents from the Media Library
* To add a document from the media library, click on the document icon in the text editor toolbar.
* Next, click on the tab that says *"Media Library"* or *"All Documents"*.
* Select the desired document from the library.
* Name your document, tag it, and write your alt description as needed.
* Hit "Save" to proceed.
## Sizing and Floating Your Document
After you save your document to the media library, a dialogue box will appear, giving you some additional options for embedding it inline. These options may vary depending on your specific configuration. Common options include:
***Entity Name:** This is simply the name of your document, which you provided earlier.
***Display as:** This option allows you to change the size or format of the document display without affecting the original document. By default, YMCA Website Services may offer *Full, Half, and Link* display modes:
***Full:** Your document fills the available area where it's inserted.
***Half:** The document is displayed at half the size of its available area.
***Link:** The document is output as a simple text link to the document file.
***Link to:** This option wraps the document (or the link, if "Display as Link" is selected) in a hyperlink. When users click on the document, they will be directed to the specified URL.
***Align:** This allows you to float the document to the left, center, or right of the page.
***Caption:** This option adds a descriptive caption below the embedded document or link.
When you're ready to embed the document, click "Embed." You can also click the back button to choose a different document.
> *If you want to make changes to the document you just embedded after you've added it, double click on the icon, and the "Embed media" dialogue will appear. Note that the exact wording of the dialogue box may vary.*
