Case Change

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

<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/">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:14px }'
});

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 icon in the toolbar.
3. 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:

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:

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.

Examples

tinymce.activeEditor.execCommand('mceLowerCase');
tinymce.activeEditor.execCommand('mceTitleCase');
tinymce.activeEditor.execCommand('mceUpperCase');

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.