When you’re writing content, and want to start a new line of text, the last thing you need is hidden HTML tags adding more whitespace than is needed. The effect this has on your users, when they’re using your app, is frustration. There’s a definite sense that they’ve lost control if they’re seeing too much whitespace. But if you want to control those hidden tags in your rich text editor, you can take charge of your app’s line breaks..
How can you do that? You could force your textarea to make or remove line breaks by using a specific kind of tag, or save yourself the time and install a rich text editor that gives you inbuilt control fast (in 1 or 2 lines of Javascript). The TinyMCE rich text editor allows you to preserve or remove line breaks using some straightforward options.
This article explains how to configure TinyMCE’s newline break behavior.
What are line breaks?
Line breaks, in HTML, are a feature of online text that shows the reader when one line or paragraph ends, and a new one begins. However to add confusion to the subject (and task at hand), line breaks mean something different for a web browser, than it does for the computer running the browser.
What are line breaks in HTML?
Line breaks are control characters for a browser to interpret. A browser interprets the line break and then displays the movement from the current line, to a new line. Line breaks are commonly represented in HTML by the break tag <br>.
Why remove line breaks?
The main reason you might want to remove line breaks (apart from reducing customer frustration) is for better formatting of the text on screen. Generally, it’s whitespace that’s not intentionally added to the text area that causes the most frustration.
There are web-based services to remove and correct abnormal line break and whitespace issues. But a reliable WYSIWYG can be configured for optimal line break control, so that you don’t need to go back and forth between HTML and text constantly checking that there are no line break problems.
How to add line breaks in TinyMCE
The default behavior for TinyMCE is that pressing the enter or return key moves the cursor to a new line, and makes a pair of paragraph tags (<p></p>). Holding down shift while pressing enter or return, creates a break tag (<br >) without creating a new block level made out of paragraph tags. Essentially, this is the best way to add a line break to the text.
How to remove line breaks in TinyMCE
Note: When you want to remove line breaks in TinyMCE, changing the root element that makes up a block – that is, the base HTML block element that separates content to create a line break – can impair the editor functionality.
To remove line breaks configure them using the forced root block option, and the newline behavior option. You can also add the remove trailing brs option to clear away any extra <br> tags if needed (but this is not included in the following demo).
The following procedure uses an example of a TinyMCE demo working in an email builder (one of the many TinyMCE solutions available).
-
Create an index.html file on your workstation
-
Add the following JavaScript content to the head section:
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#editor',
plugins: 'powerpaste advcode code casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap linkchecker emoticons advtable export autosave',
toolbar: 'code | undo redo formatpainter | visualblocks | alignleft aligncenter alignright alignjustify | blocks fontfamily fontsize | bold italic underline forecolor backcolor | lineheight | removeformat',
height: '400px',
});
</script>-
Add the following HTML body content to the file:
<body>
<div class="container">
<div class="toolbar"></div>
<div class="email">
<table style="background-color: #f9f9fb; width: 100%;" border="0">
<tr>
<td align="center">
<table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #eee; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 16px 64px 0;">
<div class="tinymce" id="editor" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
<p>Are you:</p>
<p><strong>Building a new email client</strong> (i.e. the next Gmail) and need rich text editor functionality?</p>
<p><strong>Building email marketing software</strong> (i.e. the next Mail Chimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
<p>Then use the only WYSIWYG editor that is trusted by 1.5M developers.</p>
<p><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="<a href="https://tiny.cloud/pricing">https://tiny.cloud/pricing</a>">Get started with your 14-day free trial</a></p>
</div>
</td>
</tr>
<tr>
<td style="padding: 0 64px 16px;">
</td>
</tr>
<tr>
<td style="background-color: #eff0f6; padding: 24px 64px;">
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;"><a href="#" style="color: #a0a9c5;">Update your email preferences</a> or <a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>-
Replace the “no-api-key” string in the first script tag with your TinyMCE API key, which you can get by signing up (using a Google account, or GitHub account). One of the major advantages of creating content in TinyMCE is the addition of advanced, Premium features that make your app more enjoyable, like PowerPaste, and Image Editing.
When you sign up for an API key, you gain 14 days FREE access to Premium plugins (like PowerPaste and Image Editing).
-
Save the changes.
Remove line breaks with TinyMCE
-
Add to the TinyMCE JavaScript, introducing the forced_root_block option, and configure it to specify the default paragraph tag:
forced_root_block: 'p',-
Add the newline behavior option:
newline_behavior: '',-
Set the newline behavior option to “block” to prevent any new line breaks from appearing in the editor when presssing the enter key:
newline_behavior: 'block',-
Save the changes, and then test creating line breaks. You can make use of the Visual Blocks plugin and the Code plugin to check on the effect of removing line breaks from the editor:
How to insert a line break instead of paragraphs
You can completely invert the behavior of how TinyMCE adds line breaks, by inverting how the newline behavior works.
-
Change the newline behavior setting from “block” to “linebreak” (one word, no spaces).
newline_behavior: 'linebreak',- Disable the forced_root_block option:
// forced_root_block: 'p',
-
Save the change, and test out the new break options. The line breaks are now <br> tags when pressing the enter or return key:
How to preserve line breaks in-editor
If you’d like to hold on to the line breaks, and keep the space caused by the <br> tags when the editor content is exported, one solution suggested by Jehy on Stack Overflow is to use regex to replace new line content with break tags. This solution could be tied to an event listener that changes the text area content just before it is exported.
Remove line breaks and more formatting options
If your content creation experience needs fine-grained control over line breaks and whitespace, configuring just two settings in TinyMCE’s JavaScript can provide a specific line break experience. This removes line breaks, effectively stopping the break (<br>) tag from appearing at all.
If you’re looking for more information on design, and removing frustration from content creation, check on the guide to inserting special characters into the text area. If you have any questions, contact us to find out more about how TinyMCE helps create a better content creation experience.
