CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/Features

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. The Productivity Pack is included in our commercial license. If you have an active CKEditor 5 license, please contact your Account Manager to check your eligibility. Some legacy licenses are not eligible for the exclusive Productivity Pack even if they are active. 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 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

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';

ClassicEditor
    .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( /* ... */ );

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