FontAwesome allows you to insert formatted Font Awesome icon (version 4.7) into your text in CKEditor.

Install:

1. add in your html page font-awesome.min.css
2. add in your config.js from ckeditor folder:

• config.extraPlugins = 'ckeditorfa';
• config.allowedContent = true;
• config.contentsCss = '/{your_path}/font-awesome.min.css';

CKEDITOR.dtd.$removeEmpty['span'] = false;

For Font Awesome 5.x use this plugin: https://ckeditor.com/cke4/addon/ckeditorfa5

For Font Awesome 6.x use this plugin: https://ckeditor.com/cke4/addon/ckeditorfasix

This plugin allows to create custom paste handling logic for a given paste type. It is used in the Paste from Word and Paste from Google Docs implementations.

It supports filtering content with Advanced Content Filter and custom filter files.

This plugin adds the A11yFirst Help menu button to the editor toolbar, which launches a dialog box that provides explanatory text on topics that help authors understand the accessibility issues of editing web documents.

It compliments and provides specific information on the use of the full suite of A11yFirst plugins: Heading / Paragraph, Character Style, A11yFirst Image and A11yFirst Link.

Overview

Each of the A11yFirst plugins embodies a new approach to authoring accessible web documents. Rather than relying upon a reactive model that detects problems after they exist, the A11yFirst approach is proactive. It enables authors to create content that is accessible during the authoring process, by providing feedback and validation on a feature-by-feature basis.

For example, once an author becomes familiar with the requirements for, say, adding images to documents, it becomes second nature to provide alternative text when the image is added, and to consider whether the image needs a longer description in the document.

Features

The A11yFirst Help dialog box contains the following information:

• How to get started using A11yFirst for CKEditor and why accessibility is important

• How to work with the A11yFirst features, as well as a few of the standard features included in CKEditor that are important for accessibility

• The purpose of, and contributors to, the A11yFirst Project

In particular, it includes the following topics and subtopics:

Heading / Paragraph

• Menu items
• About headings
• About paragraph formats
• Why headings and paragraph formats are important
• More information

List

• Working with lists
• List properties via context menu
• About lists
• Why lists are important

Image

• Accessible image descriptions
• Alternative text
• Long descriptions for complex images
• Adding a long description in the document
• Insert a caption text box below the image
• Writing effective alternative text
• Why image descriptions are important
• More information

Character Style

• Working with character styles
• About character styles
• Character styles vs. headings, lists and paragraph formats

Link

• Display Text
• About links
• Why links are important
• More information

Getting Started

• What is A11yFirst?
• Commitment to accessibility
• Document accessibility
• A different way of thinking

About A11yFirst

• Project Description & Goals
• Project Information
• Contributors
• Sponsors
• Acknowledgements

This plugin adds the A11yFirst Image button to the editor toolbar. It provides authors with additional features for ensuring image accessibility for people with disabilities.

It is a replacement for the standard Image and Enhanced Image plugins.

Overview

The A11yFirst Image plugin is a modification of the Enhanced Image (image2) plugin to include important accessibility features for validating Alternative Text and allowing the author to identify the location within the document of a longer description of the image.

People with visual impairments need descriptions of informative images to understand the purpose of the image. Each informative image must at least have Alternative Text and may require a longer description, especially if the image is a chart or graph.

Alternative Text should be succinct and should not include redundant or irrelevant information (e.g. "image of .."). An image that is purely decorative should have empty Alternative Text, but since this is rare the plugin requires the author to confirm that the image is purely decorative.

A complex informative image should have a long description in the page, adjacent to the image. The plugin provides a way for the author to provide a reference to the location of the long description in the page, which can provide a more semantically meaningful description. For example, a table may be provided that includes the data used to generate a chart or graph.

Features

Alternative Text Validation

The following conditions for Alternative Text are checked:

• Empty
• More than 100 char. in length
• Starts with the phrases ‘image of,’ ‘photo of’ et al.
• Includes file name or size
• For a decorative image, allows the user to confirm that Alternative Text is not required

Identifying Long Description

A select box allows the author to indicate if a longer description of the image exists in the document, and if so, its location (i.e. before, after or before and after the location of the image in the document).

Help

The help command opens a dialog box that contains information to help authors learn more about the accessibility issues related creating alternative text and long descriptions.

NOTE: The help feature is dependent on the A11yFirst Help plugin being installed.