Case Change

Live example

This example shows how to use the Case Change plugin to change the case of text in block selection to uppercase, lowercase, or title case. For more information on the Case Change plugin, see the docs.

TinyMCE HTML CSS JS Edit on CodePen

<textarea id="casechange">
  <p style="text-align: center;">
    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
  </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? Visit the <a href="https://community.tinymce.com/forum/" target="_blank">Community Forum</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE Enterprise</a>.</li>
  </ul>

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

  <table style="text-align: center;">
    <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",
});