CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/Features

Case change

The case change feature lets you quickly change the letter case of the selected content. You can use it to format part of the text like a title or change it to all-caps and back.

Unlock this feature with a CKEditor Paid Plan. Sign up for a free trial, or select the Plan that provides access to all the premium features you need.

# Demo

The demo below lets you test the case change. Place the cursor inside a block such as a paragraph, heading, or list item to affect the entire block. You can also select a text fragment you want to change. Then, apply the case formatting with the Case change toolbar dropdown.

You can also use the Shift+F3 keyboard shortcut to cycle through case formats: UPPERCASE > lowercase > Title Case. Undo changes with Ctrl/Cmd+Z.

On the art of proper handling of the titles

Title case (sometimes referred to as “headline case”) is a way of capitalization used when writing the titles of literary works or works of art in English. All words in the title are then capitalized, except for some minor words (such as articles, short prepositions, and some conjunctions) that are not the first or last words of the title.

Rules and standards

There are different rules for which words are major, and what should be capitalized. The most popular and widespread rulebooks include the Associated Press Stylebook, Chicago Manual of Style, Modern Language Association Handbook, or American Medical Association Manual of Style Capitalization Rules.

The title case is opposed to the sentence case, where only the first word and proper names start with a capital letter. There is also the all-caps case, where everything gets capitalized.

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor } from 'ckeditor5';
import { CaseChange } from 'ckeditor5-premium-features';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ CaseChange, /* ... */ ],
		toolbar: [ 'caseChange', /* ... */ ],
		caseChange: {
			// Configuration.
		},
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

Read more about installing plugins and toolbar configuration.

# Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the License key and activation guide for details.

# Configuring the title case mode

Approaches to the title case change vary. This is why we did not add a default ruleset. You can use the config.caseChange.titleCase configuration to apply your rules. The configuration allows for adding exclusions – words that the feature should not capitalize, as shown in the example below. It also provides an entry point for writing custom sentence end detection mechanisms to handle exclusions in special positions in the sentence.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ... Other configuration options ...
        caseChange: {
            titleCase: {
                excludeWords: [ 'a', 'an', 'and', 'as', 'at', 'but', 'by', 'en', 'for', 'if', 'in',
                    'nor', 'of', 'on', 'or', 'per', 'the', 'to', 'vs', 'vs.', 'via' ]
            }
        },
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

Here are some more CKEditor 5 features that can help you format your content:

# Common API

The CaseChange plugin registers:

  • The 'caseChange' UI dropdown component.
  • The 'changeCaseUpper', 'changeCaseLower', and 'changeCaseTitle' commands implemented by CaseChangeCommand.

You can execute the command using the editor.execute() method:

// Change the case of selected content to uppercase.
editor.execute( 'changeCaseUpper' );

// Change the case of selected content to lowercase.
editor.execute( 'changeCaseLower' );

// Change the case of selected content to title case.
editor.execute( 'changeCaseTitle' );

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.