NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.
Note: This plugin is only available for paid TinyMCE subscriptions.
The Case Change plugin is a time saving and handy extension that allows changing the case of text in block selection to uppercase, lowercase, or title case.
Try our Case Change demo
Changing the case of selected text
Perform the following steps to change the case of selected text in a document to lowercase, UPPERCASE, or Title Case:
- Select the desired text to change the case.
- Click on the
icon in the toolbar.
- From the drop-down menu, choose the desired format by clicking on either lowercase, UPPERCASE, or Title Case.
Note: The toolbar button will retain the last applied type of case making it simple to apply the same formatting multiple times.
Types of Formats
Currently, there are three types of formats available:
lowercase
The lowercase option changes all the selected characters to lowercase. This is a handy option in situations when the Caps Lock key was accidentally left on while typing. Instead of starting over and retyping everything, the user can simply select this text and change words to lowercase if they have been erroneously capitalized in the input.
UPPERCASE
The UPPERCASE option changes all the selected characters to uppercase. This formatting option is useful in documentation, where “initial caps” are to be used (“headline style”) as opposed to sentence style (first word of sentence or phrase capitalized only), regardless of the specific type of title, heading, header, or interface text.
Title Case
The Title Case option changes anything other than articles, coordinating conjunctions, or short prepositions to capital letters. The default rule set for Title Case is based on Wikipedia Title Case.
Title Case options
Title Case can be customized to create user defined rule sets by using the following options:
casechange_title_case_minors
The casechange_title_case_minors
option is used to customize the rules while using Title Case. This option makes it possible to configure what words not to capitalize. All other words not specified by this rule set will be capitalized overriding the default Title Case rule set.
Type: Array
Default: A rule set based on Wikipedia Title Case
Example: Using casechange_title_case_minors
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'casechange',
toolbar: 'casechange',
casechange_title_case_minors: [
'at', 'by', 'in', 'of', 'on', 'up', 'to', 'en', 're', 'vs',
'but', 'off', 'out', 'via', 'bar', 'mid', 'per', 'pro', 'qua', 'til',
'from', 'into', 'unto', 'with', 'amid', 'anit', 'atop', 'down', 'less', 'like', 'near', 'over', 'past', 'plus', 'sans', 'save', 'than', 'thru', 'till', 'upon',
'for', 'and', 'nor', 'but', 'or', 'yet', 'so', 'an', 'a', 'some', 'the'
]
});
Toolbar buttons
The Case Change plugin provides the following toolbar buttons:
Toolbar button identifier | Description |
---|---|
casechange | Changes the case of text in a block selection to uppercase, lowercase, or title case. |
These toolbar buttons can be added to the editor using:
- The
toolbar
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
Menu items
The Case Change plugin provides the following menu items:
Menu item identifier | Default Menu Location | Description |
---|---|---|
casechange | Not Applicable | Changes the case of text in a block selection to uppercase, lowercase, or title case. |
These menu items can be added to the editor using:
- The
menu
configuration option. - The
contextmenu
configuration option. - Custom Menu toolbar buttons.
Commands
The Case Change plugin provides the following JavaScript commands.
Command | Description |
---|---|
mceLowerCase | Converts selected text to lower-case. |
mceTitleCase | Converts selected text to title-case. |
mceUpperCase | Converts selected text to upper-case. |
Examples
tinymce.activeEditor.execCommand('mceLowerCase');
tinymce.activeEditor.execCommand('mceTitleCase');
tinymce.activeEditor.execCommand('mceUpperCase');
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.