Editing content with the WYSIWYG

    Drupal 8 includes a rich text editor, also known as a WYSIWYG called CKEditor. DX8 provides a new text format called Cohesion for CKEditor which includes additional features to allow more formatting control over content.

    These are:

    • Applying Custom styles to elements within the WYSIWYG
    • Applying Custom styles inline to elements within the WYSIWYG
    • Applying colors inline to elements within the WYSIWYG

    Applying custom styles to content in CKEditor

    To apply a Custom styles to content within CKEditor:

    Step 1 - Create a custom style

    To apply a Custom style within CKEditor, first create your Custom style and make sure the Make available in WYSIWYG editor is ticked. Find more information on Creating custom styles.

    Make-available-wysiwyg.png

    Step 2 - Apply a custom style within CKEditor

    1. Navigate to a page or template with a Layout canvas
    2. Drag a WYSIWYG element onto the Layout canvas
    3. Double click on the WYSIWYG element to open its settings
    4. Select the text to apply your custom style to
    5. Click on the Format menu and select the element to apply. For example, Heading 1
    6. Then click on the Element styles menu and select your Custom style. This menu only shows Custom styles for the element. For example, if you have made your text a Heading 1, the Element styles menu will only show Heading 1 custom styles.

    add-custom-style-to-wysiwyg-v5.gif

    Applying custom styles and colors inline to content in CKEditor

    You can apply Custom styles and colors inline within your content in CKEditor. You might want to do this to apply a style or a color to a word in the middle of a sentence. When you apply a style inline, it wraps the word in a <span> element and applies a class to the span.

    To add a Custom style inline:

    Step 1 - Create a custom style or color

    To apply a Custom style or color inline within CKEditor, first create your Custom style or color and make sure the Make available in WYSIWYG editor is ticked. Find more information on Creating custom styles and Creating your color palette.

    Make-available-wysiwyg.png

    Make-color-available-wysiwyg.png

    Step 2 - Apply a custom style or color inline within CKEditor

    1. Navigate to a page or template with a Layout canvas area
    2. Drag a WYSIWYG element onto the Layout canvas
    3. Double click on the WYSIWYG element to open its settings
    4. Select the text to apply your custom style or color to
    5. Click on the Inline styles menu and select your Custom style or color.

    applying-inline-custom-style-v5.gif

    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket