Redactor in Craft CMS: A Guide to Using Built-in WYSIWYG Editor

Unlocking the full potential of Craft's WYSIWYG editor

Everything you would want to know about Redactor (and more)

Craft CMS is a popular content management system that offers a wide range of features and customization options for creating and managing websites. One of the most useful features of Craft is its built-in redactor, a powerful WYSIWYG editor that allows content creators to easily format text, insert images and videos, and more. In this blog post, we will explore the capabilities of the redactor in Craft and show you how to use it to create rich, engaging content for your website.

Text formatting

The redactor in Craft CMS offers a wide range of options for formatting text, making it easy for users to create engaging, well-organized content. The editor includes basic formatting options such as bold, italic, and underline, as well as more advanced options like headings, blockquotes, and code blocks. Users can also easily create lists, both ordered and unordered, and tables to organize data. Additionally, the redactor allows users to change the font size, color and text alignment, which can help to make text more readable and visually appealing. With these formatting options, users have the flexibility to create a wide variety of content, from simple blog posts to complex articles and tutorials. Check out this config below which adds subscript and superscript to the redactor toolbar.

{
    "buttons": ["formatting", "bold", "italic", "underline", "lists", "link", "image", "video", "table", "html", "alignment", "subscript", "superscript"],
    "plugins": ["fullscreen", "table"],
    "formattingTags": ["p", "blockquote", "h1", "h2", "h3", "h4", "h5", "h6"],
    "linebreaks": true,
    "paragraphize": false,
    "replaceDivs": false,
    "toolbarFixed": true,
    "imageUpload": "path/to/upload",
    "fileUpload": "path/to/upload"
}

Link insertion

The editor includes a dedicated link button, which can be used to create both internal and external links. When the link button is clicked, a dialog box will appear, allowing users to enter the URL or select a page from their site to link to. The dialog also includes options for setting the link text and adding a title attribute to the link. Additionally, users can also create email links by specifying mailto: in the url. This can be useful for creating call-to-action buttons or linking to additional resources. The redactor also allows users to easily edit and remove links, which can be useful for making changes to existing content. With its intuitive link insertion feature, the redactor can help to enhance the user experience and make it easier for users to create engaging and informative content.

Image and Video's

The redactor in Craft CMS offers built-in support for inserting images and videos into content. The editor includes a dedicated image and video button, which can be used to upload or embed media files. Users can easily upload images and videos from their local computer, or embed them from external sources such as YouTube or Vimeo. Additionally, the redactor allows users to set the size and alignment of images, and add captions.

Here is an example of a Redactor config code that adds additional image and video capabilities such as image captions, video size and alignment to the toolbar:

{
    "buttons": ["formatting", "bold", "italic", "underline", "lists", "link", "image", "video", "table", "html", "alignment"],
    "plugins": ["fullscreen", "table", "video", "imagemenu", "imagecaption"],
    "formattingTags": ["p", "blockquote", "h1", "h2", "h3", "h4", "h5", "h6"],
    "linebreaks": true,
    "paragraphize": false,
    "replaceDivs": false,
    "toolbarFixed": true,
    "imageUpload": "path/to/upload",
    "fileUpload": "path/to/upload",
    "imageResizable": true,
    "imageCaption": true,
    "videoSize": true,
    "videoAlign": true
}

This code will enable the "imagemenu", "imagecaption", "video" plugins, which will give the user the ability to align images, add captions and set the video size and alignment. Additionally, it will enable the "fullscreen" and "table" plugins, if they are installed, the formatting tags that are available, the line breaks and the toolbar fixed. It also specifies the path to the image and file uploads, the image resizable and the video size and alignment capabilities.

Please note that you need to make sure that the corresponding plugin is installed and enabled in your Craft installation before you can use it in the config.

By using these capabilities, users can create visually appealing and engaging content that includes images and videos in a variety of sizes and alignments, with captions and contextual information.

Customizable toolbar

The redactor in Craft CMS allows users to customize the toolbar to fit their specific needs. The toolbar can be configured to include only the buttons and plugins that are necessary for the task at hand, making it easier for users to find the tools they need.

Here is an example of a Redactor config code that changes the default toolbar, and add custom buttons and plugins:

{
    "buttons": ["bold", "italic", "underline", "lists", "link", "image", "video", "alignment"],
    "plugins": ["fullscreen", "table", "video", "imagemenu", "imagecaption"],
    "formattingTags": ["p", "blockquote", "h1", "h2", "h3", "h4", "h5", "h6"],
    "linebreaks": true,
    "paragraphize": false,
    "replaceDivs": false,
    "toolbarFixed": true,
    "imageUpload": "path/to/upload",
    "fileUpload": "path/to/upload",
    "imageResizable": true,
    "imageCaption": true,
    "videoSize": true,
    "videoAlign": true
}

In this example, the toolbar buttons are limited to "bold", "italic", "underline", "lists", "link", "image", "video", "alignment" and the plugins are "fullscreen", "table", "video", "imagemenu", "imagecaption". The formatting tags that are available, the line breaks and the toolbar fixed. It also specifies the path to the image and file uploads, the image resizable and the video size and alignment capabilities. By customizing the toolbar in this way, users can focus on the tools that are most relevant to their tasks, reducing clutter and improving efficiency.

It's important to note that you can add, remove or change the order of the buttons in the toolbar and also the plugins that you are using. Additionally, you can also use custom plugins created by yourself or by third parties.

Customizing the toolbar can be a powerful way to streamline the user experience and help users to work more efficiently with the redactor in Craft CMS.

Multi-language support

The redactor in Craft CMS supports multi-language support, which allows users to create content in different languages within the same field. This can be particularly useful for websites or applications that cater to a global audience.

To configure Redactor to support multiple languages, you can use the "langs" option in the Redactor config file. Here is an example of a Redactor config that supports English, Spanish, and French:

 {
    "langs": {
        "en": "English",
        "es": "Español",
        "fr": "Français"
    },
    "buttons": ["bold", "italic", "underline", "lists", "link", "image", "video", "alignment"],
    "plugins": ["fullscreen", "table", "video", "imagemenu", "imagecaption"],
    "formattingTags": ["p", "blockquote", "h1", "h2", "h3", "h4", "h5", "h6"],
    "linebreaks": true,
    "paragraphize": false,
    "replaceDivs": false,
    "toolbarFixed": true,
    "imageUpload": "path/to/upload",
    "fileUpload": "path/to/upload",
    "imageResizable": true,
    "imageCaption": true,
    "videoSize": true,
    "videoAlign": true
}

In this example, the "langs" option is set to include English, Spanish, and French, and the user can choose which language to use by selecting it from the toolbar.

It's important to note that you can add as many languages as you need and also use the language code of your choice. Additionally, you can also use third-party language packs if you need a language that is not supported out of the box.

Supporting multiple languages in the redactor can be a powerful way to reach a wider audience and create more inclusive content.

Accessibility Considerations

Accessibility is an important consideration when using the redactor in Craft CMS, as it ensures that all users, including those with disabilities, can access and use the content.

One way to improve accessibility with the redactor is to ensure that all images and videos include appropriate alternative text (alt text) descriptions. This allows users who are visually impaired to understand the content of the images and videos through assistive technologies like screen readers. The redactor in Craft CMS includes an option for adding alt text to images and videos, which can be configured in the Redactor config file.

Another way to improve accessibility with the redactor is to ensure that the text is properly structured and formatted. This includes using headings and other formatting tags to create a clear hierarchy of the content and making sure the text is easy to read with a good contrast. Additionally, you can use aria-label, aria-describedby, and other ARIA attributes to help screen readers understand the context of the content.

Start Making Beautiful Rich Content!

In conclusion, using the redactor in Craft CMS can greatly enhance the user experience for creating and editing content. With its extensive range of text formatting options, image and video add-ons, customizable toolbar, and multi-language support, the redactor allows for a high degree of flexibility and control over the content. Additionally, with the built-in accessibility options and the ability to add alt text to images and videos, the redactor can help ensure that the content is accessible to all users.

If you're interested in learning more about how to use the redactor in Craft CMS and how to improve accessibility of your content, please reach out to BrillianceNW. Their team of experts can provide guidance and support to help you make the most of the redactor and ensure that your content is accessible to all users.