Text Editor

CKEditor 5

The Digital Commons platform employs the CKEditor 5. This Text Editor functions much like Microsoft Word and other word-processing programs. Enter text content into the Text Editor and format it as desired.

Jump to:

How To

  • 1

    Understand the Text Editor Toolbar

    Toolbar and icons for the CKEditor 5 Text Editor
    Above: Toolbar and icons for the CKEditor 5 Text Editor. Enlarge this image.

    Across the top from left to right, the Text Editor toolbar buttons and functions are as follows: 

    1. Paragraph Format Dropdown Menu- Use this to format text as Paragraph or Headings (2-6).
    2. Bold- Use this to bold the selected text. Use emphasis sparingly. Do not use bolded text in place of headings.
    3. Italic- Use this to italicize the selected text. Use emphasis sparingly.
    4. Bulleted list- Use bullets to create lists if the order does not matter. Learn about Lists and Digital Accessibility.
    5. Numbered list- Use a numbered list when the order is importnant.
    6. Decrease the indent of the selected text.
    7. Increase the indent of the selected text.
    8. Block Quote-  Draw attention to a quote by indenting it and increasing the font size. This function should only be used for actual quotations, not simply to style text.
    9. Special Characters- Use this menu to select special characters, such as foreign currency or trademark symbols, from these categories: Currency, Text, Mathematical, Arrows, Latin.
    10. Superscript text
    11. Subscript text
    12. Link- Highlight text and select this button to create a link. A pop-up window opens to allow you to search for a content title or paste an external URL. Advanced options include CSS for button styling and the option to open in a new window. Be sure that your link text is meaningful and self-explanatory.
    13. Anchor - Insert and name an anchor to jump to this specific location on the page.
    14. Undo a previous action.
    15. Redo a previous action.
    16. Remove format from entered text. This is especially helpful when you want to strip away code and formatting from large blocks of text pasted from MS Word or another source.
    17. Table- Use this button to insert a table. Be sure to properly identify column and/or row headers to ensure the table is accessible.
    18. Insert Media- Use this button to insert media from the media library. You can select from existing media or upload new media.
    19. Styles- Use this menu to identify paragraphs or text that should not be translated into another language.
    20. Choose Language- If you need to provide web content in a language other than English and the Google Translate feature is not sufficient, you must specify the language for digital accessibility.
    21. Source- View or edit the HTML source code for the text area. This is useful for inserting iFrames on content types where the iFrame Component is not available. 
  • 2

    Paste Text

    You can type directly into the Text Editor or you can paste text copied from your word processing program. To copy and paste you can right-click for a menu or use the following keystrokes: 

    • Copy- CTRL + C
    • Paste- CTRL + V
    • Past as Plain Text- CTRL + Shift + V

    Text Format

    The Text Editor offers a drop-down menu for pasting formats. All new text fields are set to the Paste Filtered HTML text format by default. However, existing pages on your website may be using the Full HTML setting. You can check which setting is in use by looking beneath the text area for the drop-down menu. 

    Text format paste options drop down box.
    Paste Filtered HTML

    Text Format is set to Paste Filtered HTML by default. When you paste text into the text editor with this setting, hidden HTML tags are filtered out to maintain a consistent look across your website. 
     

    Full HTML

    To retain markup, change the Text Format to "Full HTML" using the drop-down menu before pasting content.

  • 3

    Format Headings

    Headings make it easier for website visitors to scan topics. Use headings to outline content in numerical order. Do not use bolded text in place of headings. 

    Learn about Headings and Digital Accessibility.

    The Page Title is always Heading 1, so the options in the drop-down menu start with Heading 2: 

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6
  • 4

    Tables

    1. Select the Insert Table button in the toolbar.
    2. Use the grid selector to set the desired number of rows x columns, up to 10 of each. More can be added later.
    3. The table is inserted.
    4. A formatting menu appears when the table is selected. Use this to add, remove, or merge rows or columns. You can also provide a caption and edit both cell and table properties.
    5. You must identify the column and/or row headings for accessibility. 
    Example: This is a 3x3 table with a header row.
    Mountain RegionPiedmont RegionCoastal Plain Region
    datadatadata
    datadatadata
  • 5

    Insert and Format Media

    Audio 

    For audio files, see the Audio and Podcast File Embed Help Topic.  

    Images

    For file type and dimension guidance, see the Image Formats Help Topic. 

    1. In the Text Editor, select the place you want the image to appear.
    2. Select the Insert Media button indicated by the photo and music note icon.
    3. The Add or Select Media dialogue box appears. Upload or find the desired image.
    4. Select the image.
    5. Select the Insert Selected button.
    6. The image is inserted.
    7. A formatting menu appears when the image is selected. You can add a caption, edit the alternative text, resize the image, and edit text breaking, wrapping and alignment. 
    People in the air riding a swing ride with a blue sky.
    Captions appear below the image. 
    Accordion

    Image Option Examples within the Text Editor

    Tab/Accordion Items

    People in the air riding a swing ride with a blue sky.
    Break text

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit, urna at laoreet porta, lacus dolor porttitor urna, et ullamcorper odio nisi nec turpis. Integer varius ligula ligula, sit amet consequat quam efficitur eu. Praesent quis interdum ligula, nec ornare felis. Suspendisse vehicula hendrerit sem, quis consequat enim luctus id. Maecenas sagittis euismod congue. Donec sagittis fringilla eros ac pellentesque. Sed metus lacus, consectetur auctor ultrices porttitor, sollicitudin non purus. Nunc varius congue porttitor. Nullam lacinia felis eu turpis tempus, ut pulvinar ligula vestibulum. Mauris quis molestie ante, et semper enim.

    People in the air riding a swing ride with a blue sky.
    Align center and break text

    Ut ac pharetra nisi, non faucibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nibh vel orci volutpat laoreet. Quisque ac nisi lacus. Nunc ligula erat, vulputate eu odio sed, dignissim tristique nisi. Pellentesque non dui odio. Integer imperdiet laoreet dui, feugiat lobortis ligula faucibus id. Integer dapibus placerat libero in condimentum. Quisque placerat egestas nulla. Donec vel vehicula nisi. Quisque mattis fringilla rhoncus. Proin aliquet sapien diam, vitae facilisis ante molestie nec.

    People in the air riding a swing ride with a blue sky.
    Align left and wrap text

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit, urna at laoreet porta, lacus dolor porttitor urna, et ullamcorper odio nisi nec turpis. Integer varius ligula ligula, sit amet consequat quam efficitur eu. Praesent quis interdum ligula, nec ornare felis. Suspendisse vehicula hendrerit sem, quis consequat enim luctus id. Maecenas sagittis euismod congue. Donec sagittis fringilla eros ac pellentesque. Sed metus lacus, consectetur auctor ultrices porttitor, sollicitudin non purus. Nunc varius congue porttitor. Nullam lacinia felis eu turpis tempus, ut pulvinar ligula vestibulum. Mauris quis molestie ante, et semper enim.

    People in the air riding a swing ride with a blue sky.
    Align right and wrap text

    Ut ac pharetra nisi, non faucibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nibh vel orci volutpat laoreet. Quisque ac nisi lacus. Nunc ligula erat, vulputate eu odio sed, dignissim tristique nisi. Pellentesque non dui odio. Integer imperdiet laoreet dui, feugiat lobortis ligula faucibus id. Integer dapibus placerat libero in condimentum. Quisque placerat egestas nulla. Donec vel vehicula nisi. Quisque mattis fringilla rhoncus. Proin aliquet sapien diam, vitae facilisis ante molestie nec.

    People in the air riding a swing ride with a blue sky.
    Inline Small
    People in the air riding a swing ride with a blue sky.
    Inline Medium
    People in the air riding a swing ride with a blue sky.
    Inline Large
    People in the air riding a swing ride with a blue sky.
    Inline Extra Large
  • 6

    Create a Block Quote

    Draw attention to a quote by indenting it and increasing the font size. This function should only be used for actual quotations, not simply to style text.

    1. In the Text Editor, highlight the quote text.
    2. Select the Block Quote button indicated with the large quotation mark icon.
    3. Styling is applied to draw attention to the quote as illustrated in the Block Quote Example below. 
    Accordion
    Tab/Accordion Items

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit, urna at laoreet porta, lacus dolor porttitor urna, et ullamcorper odio nisi nec turpis. Integer varius ligula ligula, sit amet consequat quam efficitur eu. Praesent quis interdum ligula, nec ornare felis. Suspendisse vehicula hendrerit sem, quis consequat enim luctus id. Maecenas sagittis euismod congue.

    "Ut ac pharetra nisi, non faucibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nibh vel orci volutpat laoreet. Quisque ac nisi lacus. Nunc ligula erat, vulputate eu odio sed, dignissim tristique nisi. Pellentesque non dui odio. Integer imperdiet laoreet dui, feugiat lobortis ligula faucibus id. Integer dapibus placerat libero in condimentum. Quisque placerat egestas nulla. Donec vel vehicula nisi. Quisque mattis fringilla rhoncus. Proin aliquet sapien diam, vitae facilisis ante molestie nec."

    Cras ac interdum nisi, vel scelerisque felis. Sed sodales, urna vel dictum finibus, sapien sapien dictum erat, ac ullamcorper dolor odio ut sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sodales dignissim posuere.