Case Change

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

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="casechange">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h1 style="text-align: center;">Welcome to Case Change!</h1>

  <p>
    Please try out this demo of our new <b>Case Change</b> premium plugin that is a time saving and handy extension that allows changing the case of text in block selection to uppercase, lowercase, or title case.<br>
  </p>

  <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>

  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>

  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2>Finally ...</h2>

  <p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you in creating great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>
tinymce.init({
  selector: 'textarea',
  plugins: 'casechange',
  toolbar: 'casechange',
  height: '600px',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

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:

  1. Select the desired text to change the case.

  2. Click on the Case Change icon in the toolbar.

  3. From the drop-down menu, choose the desired format by clicking on either lowercase, UPPERCASE, or Title Case.

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.

UPPERCASE

The UPPERCASE option changes all the selected characters to uppercase.

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 value: 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 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:

Commands

The Case Change plugin provides the following TinyMCE 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');