guideCase 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.

This premium feature is a part of the Productivity Pack available only for customers with a commercial license. Contact us for more details.

You can also sign up for the CKEditor Premium Features 30-day free trial to test the feature.

# 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 StylebookChicago Manual of StyleModern 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

This feature is enabled by default in the superbuild only.

To add this feature to your editor, install the @ckeditor/ckeditor5-case-change package:

npm install --save @ckeditor/ckeditor5-case-change

Then add the CaseChange plugin to your plugin list:

import { CaseChange } from '@ckeditor/ckeditor5-case-change';

    .create( document.querySelector( '#editor' ), {
        plugins: [ CaseChange, /* ... */ ],
        toolbar: [ 'caseChange', /* ... */ ],
        // Title case configuration, see the section below.
        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( /* ... */ );

# 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. It also provides an entry point for writing custom sentence end detection mechanisms to handle exclusions in special positions in the sentence.

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.