Start trial
Plans & PricingContact Us
Log InStart For Free

Autoformatting: How to enable it for content in your app's rich text editor

March 16th, 2023

5 min read

Highlighted parts of text showing a demo of TinyMCE autoformatting.

Written by

Joe Robinson

Category

How-to Use TinyMCE

When sorting between nice-to-have and essential features, it can be a challenge to identify which ones are most valuable. By playing out the possibilities, looking at the customer research, automatic formatting (autoformatting) might come up as an essential feature. But if you’re swimming in essential features, where’s the time to build autoformatting? The answer might surprise you – don’t do it yourself. Let your rich text editor handle it. 

TinyMCE is a trusted out-of-the-box rich text editor. And when it’s incorporated into your app for text entry and content writing, it auto formats text as  people type. Here’s a sample of three features that are under the autoformatting umbrella:

  1. Automatic Spelling Check – detect and correct basic spelling mistakes as you type
  2. Autoresize of the textarea – automatically adjust the textarea size as the content expands
  3. Auto Linking – automatically change pasted URLS into text hyperlinks
  4. Accessibility checking – Shows you exactly where content could be more accessible with suggestions.
  5. Advanced Typography – Include professional typographical symbols as needed

This article covers these three essential forms of autoformatting, showing you how to adjust TinyMCE’s integration within your application to set up autoformatting.

Auto format text as you type: what’s available in TinyMCE

Here’s a bit more detail on the autoformatting options to help decide which ones you need configured:

1. Spelling Autocorrect for autoformatting

This plugin can automatically catch small spelling errors, or typography errors like missing capital letters at the start of a sentence. It changes them as you type. There are some specific conditions for the plugin worth reading about in the documentation.

2. Autoresize for autoformatting

Making use of this plugin’s options sets up the TinyMCE text area to change its size when more content is added to the text area. For instance, pasting in more text means the text area will automatically enlarge to fit the new content.

3. Autolink for autoformatting

When the customer pastes a valid URL into the text area, this plugin automatically converts the URL into hyperlink text. What counts as a complete URL is the hypertext transfer protocol at the beginning of the link (https://…), along with the domain (.com).

4. Accessibility Checker and autoformatting

When run, this plugin automatically checks and offers suggestions for improving the accessibility of content within the textarea. Some suggestions can be applied automatically. The plugin is included in the demo that appears in the upcoming section, but it is beyond the scope of this guide to configure the Accessibility Checker plugin completely.

5. Advanced Typography and autoformatting

This plugin will automatically typewriter-style characters into typographical characters, which improves the appearance of content within the text editor. Useful for providing a professional appearance automatically.

How to enable autoformatting

The following step-by-step explains how to create a demo showing the autoformatting plugins in action. At the end of this, you’ll have  an essential version of TinyMCE running (based on TinyMCE’s CMS solution), and then need to do the configuration of the autoformatting plugins.

  1. Create an index.html file in your developer environment.

  2. Add the following HTML and JavaScript content to the index.html file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
        <script>
            tinymce.init({
                selector: "#editor",
                plugins: "a11ychecker autocorrect autolink autoresize typography",
                toolbar: "undo redo | styles | bold italic underline strikethrough | align | spellcheckdialog a11ycheck typography",
                menbar: false,
                height: 540,

                //Autoformatting settings and options
                autocorrect_autocorrect: true,
                autocorrect_capitalize: true,
                autoresize_bottom_margin: 50,
                min_height: 100,

                typography_default_lang: [ "en-US" ],                typography_rules: [
                    'common/punctuation/quote',
                    'en-US/dash/main',
                ]
            });
        </script>
    </head>
    <body>
        <h1>TinyMCE Autoformatting Example</h1>
        <form method="post">
          <textarea id="editor">
                <h2>Norway 3-day itinerary</h2>
                <p>If you're in Norway for a long weekend or just a short trip, here's our recommendation:</p>
                <table style="border-collapse: collapse; border-width: 1px;" border="1">
                    <thead>
                        <tr>
                            <td style="width: 12.9794%; border-width: 1px;"> </td>
                            <td style="width: 44.5428%; border-width: 1px;">
                                <strong>Location</strong>
                            </td>
                            <td style="width: 42.4779%; border-width: 1px;">
                                <strong>Activity</strong>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="width: 12.9794%; border-width: 1px;">
                                <strong>Day 1</strong>
                            </td>
                            <td style="width: 44.5428%; border-width: 1px;">Flåm Mountain Railway and Flåm village</td>
                            <td style="width: 42.4779%; border-width: 1px;">Tellus est malesuada </td>
                        </tr>
                        <tr>
                            <td style="width: 12.9794%; border-width: 1px;">
                                <strong>Day 2</strong>
                            </td>
                            <td style="width: 44.5428%; border-width: 1px;">UNESCO-listed N&aelig;røyfjord and Voss village</td>
                            <td style="width: 42.4779%; border-width: 1px;">Vivamus pretium ornare est</td>
                        </tr>
                        <tr>
                            <td style="width: 12.9794%; border-width: 1px;">
                                <strong>Day 3</strong>

                            </td>
                            <td style="width: 44.5428%; border-width: 1px;">Leaving Voss</td>
                            <td style="width: 42.4779%; border-width: 1px;">Amet, consectetuer adipiscing</td>
                        </tr>
                    </tbody>
                </table>
            </textarea>
        </form>
    </body>
</html>
  1. To try out some of the autoformatting plugins available, you’ll need an API key. This key gives you free access to TinyMCE Premium plugins for 14 days. Navigate to the Get-tiny sign up page to get your FREE API key. 

  2. In the head section, add your API key to the script tags. This is what the link looks like:

<script
  src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js"
  referrerpolicy="origin"
></script>;
  1. Test run the index.html file by opening it in your browser, or use a local server command with Python or with the PHP command:

The initial TinyMCE Autoformatting demo working

To make use of the autoformatting options, this demo has configured the following:

  • autocorrect_autocorrect is set to true so that the autocorrect plugin is enabled and running when the editor is loaded
  • autocorrect_capitalize is set to true so that when a capital letter is missed at the start of a sentence, the Spelling Autocorrect plugin will autoformat the first letter of the sentence so that it is a capital letter.
  • autoresize_bottom_margin is set to 50. This means that when the editor loads, 50 pixels of padding will be added to the end of the editor. This autoformatting option is added to keep some whitespace available at the end of the editor
  • The min_height option is set to 100 so that the editor cannot shrink past 100 pixels when automatically adjusting to the editor contents.
  • The Advanced Typography plugin requires a default language set, and the option configured specifies US English. This list of language codes are used to configure the languages in TinyMCE.
  • The demo only has two rules for the Advanced Typography autoformatting feature: automatic quote changes, and dash changes. You can add more rules by checking the list of typography rules – the documentation has a good example.

How to disable autoformatting

While the demo in the previous procedure has an autoformatting configuration, if you'd like to deactivate or disable some of the autoformatting behavior, you can adjust the plugins list, and comment out the options, or set them to false:

  1. In the TinyMCE plugins option, remove any plugins you don’t need, for example, this one removes Autoresize:

            tinymce.init({
                selector: "#editor",
                plugins: "a11ychecker autocorrect autolink typography",

Note: it may be worthwhile commenting which autoformatting plugins are removed. JavaScript comments with a “//” work within the TinyMCE init script.

  1. Remove any plugins options related to the plugin:

               //Autoformatting settings and options
                autocorrect_autocorrect: true,
                autocorrect_capitalize: true,
             //   autoresize_bottom_margin: 50,
             //   min_height: 100,
                typography_default_lang: [ "en-US" ],
                typography_rules: [
                    'common/punctuation/quote',
                    'en-US/dash/main',
                ]
  1. Save the changes, and test the application without the unneeded plugin. The ability to resize the TinyMCE text area manually returns with the Autoresize plugin disabled:

Autoformatting working in the demo

Autoformatting extended and next steps

If you’d like to continue adding different autoformatting capability to the TinyMCE rich text editor in your application, the next configurations to try out are larger scale plugins like the Accessibility Checker plugin.

You can find out more information on configuring the plugin in some of our larger tutorial guides – the tutorial of creating an email marketing platform with TinyMCE features a configuration for the plugin.

Contact us if you have any further questions about how TinyMCE can help you to add autoformatting to your application.

JavascriptConfigurationProductivityTinyMCE
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCENov 21st, 2024

    What are Line Breaks? Learn How to Add and Remove Them

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.