TinyMCE
MoxieManager
Drive
A useful textarea is one that’s responsive. When you’re writing in a textarea online, this means the textarea should respond, and autoresize, when you’re adding text and elements.
The response can be simple – like a range of fonts and colors – or complex.
What’s most helpful for a writer using a website’s text area though, is where the textarea height, textarea width, and textarea autoresize capabilities are inbuilt. Why? Because the ability to change size and shape adds value to your customer’s work. Equally, restricting the textarea height, width, and autoresize capacity represents something important.
Think of it like water.
A good WYSIWYG textarea should change size and fit, whenever it’s under pressure – the way water changes shape depending on the cup that holds it.
“If you put water into a cup, it becomes the cup”
~ Bruce Lee
This post explains how to set up TinyMCE for optimal textarea responsiveness. It covers how to set up autoresize, set textarea height and textarea width, and how to restrict and keep the textarea from changing size.
What does autoresize and responsive textarea mean?
When an element in an HTML page or within an app can autoresize, it can change its shape based on:
- The HTML content inside the element
- The other elements and content on the page
The autoresize ability is a part of responsive design.
It is distinct, however, from the resize CSS design element.
Autoresize vs responsive design
While autoresize affects textareas, responsive design is a far broader area that involves the entire web page appearance.
When responsive design is introduced with something like media queries, the web page changes not just size, but layout and other element positions, depending on the device the customer uses to view the page. The textarea becomes responsive, along with the rest of the page.
Responsive HTML encompases more than size.
There are a range of design elements that front end developers can set up to change automatically with responsive design. These capabilities beyond textarea autoresize, and are beyond the scope of this article.
Autoresize vs the resize CSS element
Resize is a CSS element. It differs from Autoresize since it creates the ability to manually resize a textarea. Autoresize requires a bit more configuration compared to the CSS element. The advantage is that textareas automatically change their size based on the content added to them.
Configuring the resize element in the CSS for a web page enables:
- The ability for an element to be manually resized by a customer or not
- How that the element can be resized
Once configured, the element can change its size when clicking and dragging the lower right corner of the box. It’s a manual action, not an automatic response to change.
How to use the TinyMCE Autoresize plugin
To get started on making a responsive autoresize textarea, you can test run the plugin and see its capabilities in action, using a demo Content Management System (CMS).
First, set up TinyMCE and add CMS elements
Get TinyMCE
If you haven't used TinyMCE before, start here. Otherwise, head to the next section on the CMS demo content.
- Go to tiny.cloud/signup
- Enter your information, and sign up
- Once you’re on the dashboard, scroll down to the heading TinyMCE Installation
- Copy and paste the HTML content into a new project html file (index.html for example)
- Save the demo content, and load the file in your browser. You can load the file directly by opening it with your browser of choice, and run the file through a local host with a Python command, or PHP command.
Set up the TinyMCE demo
-
In your project html file, adjust the HTML body content to include the following:
<!DOCTYPE html>
<head>
<script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<div class="wrapper">
<header class="main-head">The header</header>
<nav class="main-nav">
<ul>
<li><a href="">Nav 1</a></li>
<li><a href="">Nav 2</a></li>
<li><a href="">Nav 3</a></li>
</ul>
</nav>
<article class="content">
<textarea name="" id="textarea" cols="30" rows="10">
<p>Your CMS demo.</p>
</textarea>
</article>
<aside class="side">Sidebar</aside>
<footer class="main-footer">The footer</footer>
</div>
</body>
<script>
tinymce.init({
selector: 'textarea',
plugins: `powerpaste a11ychecker tinymcespellchecker linkchecker wordcount table advtable editimage autosave advlist anchor advcode image link lists media mediaembed searchreplace visualblocks template autoresize`,
toolbar: `undo redo | styles | bold italic underline strikethrough | align | table link image media | bullist numlist outdent indent`,
});
</script>
</body>
</html>-
Set up a style sheet for the CMS by adding style tags after the html head section:
<style>
body {
font-family: 'Courier New', Courier, monospace;
}
.main-head {
grid-area: header;
border: solid black;
border-radius: 5px;
border-width: 1px;
}
.content {
grid-area: content;
border: solid white;
border-radius: 5px;
border-width: 1px;
}
.main-nav {
grid-area: nav;
border: solid black;
border-radius: 5px;
border-width: 1px;
}
.side {
grid-area: sidebar;
border: solid black;
border-radius: 5px;
border-width: 1px;
}
.main-footer {
grid-area: footer;
border: solid black;
border-radius: 5px;
border-width: 1px;
}
.wrapper {
display: grid;
gap: 15px;
grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer";
}
@media(min-width: 500px) {
.wrapper {
grid-template-columns: 1fr 3fr;
grid-template-areas: "header header" "nav nav" "sidebar content" "ad footer";
}
nav ul {
display: flex;
justify-content: space-between;
}
}
@media(min-width: 700px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "header header header" "nav content sidebar" "nav content ad" "footer footer footer"
}
nav ul {
flex-direction: column;
}
}
</style>-
Save the changes
How to set up textarea autoresize with TinyMCE
-
Add the the TinyMCE Autoresize plugin:
plugins: `powerpaste a11ychecker tinymcespellchecker linkchecker wordcount table advtable editimage autosave advlist anchor advcode image link lists media mediaembed searchreplace visualblocks template autoresize`,-
Include the
autoresize_overflow_paddingandautoresize_bottom_marginoptions to automatically set up responsive padding at the sides and bottom of the editor body. This creates a small amount of padding to increase readability, which is useful when there are large amounts of texts in the textarea:
//Autoresize texarea
autoresize_overflow_padding: 5,
autoresize_bottom_margin: 25s-
Save the changes, and load the project.
-
Test out the Autoresize abilities by adding text to the TinyMCE text area. For example, copy content from Alice in Wonderland, and paste it into the editor:
How to set up textarea height automatically
You can control the textarea height and the textarea width, and keep it to a set value by adding the following options to your tinymce.init script
-
Decide on the textarea height and textarea width you require
-
Add the height and width options to the init script:
//Autoresize texarea
autoresize_overflow_padding: 5,
autoresize_bottom_margin: 25s
//Height and width
height: 500,
width: 500-
Save the changes, and reload the demo. The textarea height and width are now set automatically when TinyMCE loads in the browser.
Note that with Autoresize switched on, the textarea cannot be resized manually.
How to make the textarea non-resizable
To prevent the tinymce textarea from changing size, responding to new content added to it, configure the min_height and max_height options.
-
Add the min_height and max_height options to the tinymce.init script:
//Autoresize texarea
autoresize_overflow_padding: 5,
autoresize_bottom_margin: 25,
//Nonresize textarea
min_height: 200,
max_height: 600
});
</script>-
Comment out the height and width options configured in the previous how to steps:
//Height and width
//height: 500,
//width: 500
-
Confirm the autoresize plugin is set to ‘on’. If set to ‘off’, the option to manually stretch the textarea becomes available, and the textarea won’t be responsive.
-
Reload the demo, and try to autoresize the text area by pasting in some content. You’ll notice that the text area is locked to the maximum height set, and won’t resize any further:
What’s next for auto resize?
Apart from configuring a responsive HTML editor with an autoresize textarea, you can also set up autoresize for different content within the textarea. Find out more about this by reading the configuration of the object_resizing property.
For more information on the CMS options available with TinyMCE, you can read more on the CMS solutions page.
Autoresize is just one of TinyMCE’s plugins. With access to Premium features through a paid TinyMCE plan, you can design and apply custom skin and icons.
