14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

CSS wrapper options for content built in TinyMCE

October 18th, 2023

4 min read

The concept of css content wrapping represented by the CSS curly bracer syntax

Written by

Joe Robinson

Category

How-to Use TinyMCE

Good design takes time and focus. And that’s why front end web designers work on making sure the CSS that supports their design is effective. But finding the time to manage and compose effective CSS represents a challenge. The good news is that CSS management doesn’t need to be a productivity drain – not if you have the right components.

For content creation, there’s no better or more flexible editor than TinyMCE. It’s a rich text editor that provides a familiar UI to speed up interaction and increase productivity. Using TinyMCE’s options, you can easily manage CSS and design more efficiently. 

This article explains how to manage CSS content wrapping. It also contains a demo showing how to set up a css wrapper in TinyMCE.

What is CSS content wrapping?

CSS content wrapping is the careful application of CSS properties to ensure content or text is wrapped according to the size of the container or block-level element on a web page. Correctly CSS wrapped content includes appropriate line breaks that ensure readable and clear content blocks. CSS wrappers make use of different properties such as overflow-wrap, break-word, or anywhere.

The role of the CSS wrapper

CSS content wrapping plays an important role in grouping elements into semantic and visually alike spaces on the page. This makes the content easier to understand. Importantly, it also keeps content written wrapped inside the boundaries of the designated container, preventing text from messily breaking the web designer’s HTML.

Implementing text wrap in TinyMCE

An essential CSS property to know for your CSS wrapper is the overflow-wrap property. This property instructs the browser to prevent content from breaking out of a given block-level element boundary:

div {
    overflow-wrap: normal; /*anywhere;  break-word;
}

The break-word property is useful for your CSS wrapper as it breaks text to stop it exceeding the boundary of the parent block element.

Using TinyMCE, it’s possible to configure a CSS wrapper, and then create a custom style option. You can select, in the TinyMCE interface, to apply the CSS wrapper without having to edit any HTML or CSS. The Style Format option is what makes CSS content wrapping possible. The following demo explains how to set it up:

  1. Create a new index.html file in your development environment.

  2. Copy the following into the file to get the demo started:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TinyMCE CSS Wrapping</title>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6-dev/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: "textarea",
        plugins: [
          "advlist", "advcode", "anchor", "autolink", "charmap", "code", "fullscreen", 
          "help", "image", "insertdatetime", "link", "lists", "media", 
          "preview", "searchreplace", "table", "visualblocks", 
        ],
        toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code",
	    style_formats: [
         { title: 'Headers', items: [
            { title: 'h1', block: 'h1' },
            { title: 'h2', block: 'h2' },
            { title: 'h3', block: 'h3' },
            { title: 'h4', block: 'h4' },
            { title: 'h5', block: 'h5' },
          ] },
        { title: 'Blocks', items: [
            { title: 'p', block: 'p' },
            { title: 'div', block: 'div', classes: 'wrapper', wrapper: true },
            { title: 'pre', block: 'pre' },
            { title: 'css-wrap', block: 'div', classes: ['container0a'] }
         ] },    
	    ],
        content_style: 
     `
        body {
            background-color: #242B2E;
            color: white;
        }
 
        .container0a {
            margin: 30px;
            height: 100px;
            width: 100px;
            background-color: #FF6666;
            overflow-wrap: break-word;
        }
 
        .p {
            color: white;
            margin: 5px;
            padding: 10px;
        }
     `,
});
    </script>
</head>
<body>
    <textarea></textarea>
</body>
</html>
  1. In the HTML head section, you’ll find the following string, which is a link to TinyMCE through the CDN:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6-dev/tinymce.min.js" referrerpolicy="origin"></script>

      Change the “your-api-key” string to your TinyMCE API key. This prevents any domain name errors appearing in the TinyMCE text area. If you don’t have an API key, you can sign up for one using your Google or GitHub accounts. The key is free, and comes with a 14-day FREE trial of TinyMCE’s premium plugins, like Advanced Code, and Advanced Templates.

  1. Save the changes, and open the file in your browser, or make use of a localhost command for testing purposes.

TinyMCE setup with a design for Content Wrapping with CSS

Testing CSS wrapping in TinyMCE

 Now that the demo is ready, you can try out the CSS wrapper:

  1. Enter some content into the TinyMCE text area
  2. Select or highlight all the content
  3. In the TinyMCE toolbar, select the formats drop down menu
  4. Select “css-wrap”

Trying out CSS wrapping in TinyMCE with the preset style

The CSS wrapper class configured in the demo contains a class that has the required overflow-wrap: break-word; property. Setting up a custom format in TinyMCE means you can unlock more productivity since the CSS wrapper is applied automatically from the TinyMCE toolbar.

Content wrapper best practices in TinyMCE

There are a few best practices to be aware of when managing CSS wrappers in TinyMCE.

1. Line breaks and content wrapping

Line breaks can create issues with CSS wrapping. TinyMCE is designed to handle line breaks through key presses, and it’s important to be aware of what the results of common key presses are in TinyMCE:

  • The Enter or Return key moves the cursor to a new line
  • Shift+Enter adds a break element (< br >)

For more information, check out the guide on TinyMCE and line breaks.

2. The tab key and nonbreaking space

TinyMCE has a customizable option called nonbreaking_force_tab that is a part of the Nonbreaking Space plugin. This specific option changes the behavior of the tab key when typing content in TinyMCE. Be careful when using the non-breaking space plugin with the TinyMCE Table or List plugins, as these plugins both use the tab key for navigating and formatting.

3. Other methods for adding classes

TinyMCE has an extensive set of APIs available for interacting with the text editor. One group of these is designed for accessing the contents of the editor, and the DOM created therein.

Using the addClass API method for example, you can set up a function to automatically add a specific class to a selected element within the TinyMCE textarea. This is useful for more granular control of where CSS content wrapping is applied.

CSS wrapping and other design choices

TinyMCE offers everything you need to set up and style content beyond a CSS wrapper. For example, there are a range of custom text and skin options you can access:

Contact us if you have questions on how TinyMCE plugins and options can provide you with more productivity options in your app.

CSSDesignCMS
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 TinyMCEMay 15th, 2024

    How to set up Vue fonts in your WYSIWYG

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.