The last thing you need when you're writing content and want to start a new line of text is hidden HTML tags that add more white space than necessary. The effect this has on your users when they use your app is frustration. There's a definite sense that if you see too much white space, you've lost control. However, if you want to control these hidden tags in your rich text editor, you can take care of your application's line breaks.
How can you do that? You can force your text area to make or remove line breaks with a specific tag type, or save time and install a rich text editor that gives you quick inline control (in 1 or 2 lines of javascript). OTinyMCE enriched text editoryou can keep or remove line breaks with a few simple options.
This article explains how to configure TinyMCE's newline behavior.
What are line breaks?
Line breaks in HTML is an online text feature that tells the reader when a line or paragraph ends and a new one begins. However, to confuse matters (and the task at hand), line breaks mean something different to a web browser than to the computer running the browser.
What are line breaks in HTML?
Line breaks are control characters that a browser can interpret. A browser interprets the line break and shows the movement from the current line to a new line. Line breaks in HTML are usually represented by the <br> break tag.
Why remove line breaks?
The main reason for removing line breaks (besides reducing customer frustration) is better text formatting on screen. It's often the white space intentionally added to the text area that causes the most frustration.
There areweb-based removal and repair servicesAbnormal line breaks and problems with spaces. But a reliable WYSIWYG can be set up for optimal line-breaking control, so you don't have to switch back and forth between HTML and text to constantly check that there aren't any line-breaking issues.
How to add line breaks in TinyMCE
TinyMCE's default behavior is to press Enter or Return to move the cursor to a new line and create 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 of paragraph marks. Essentially, this is the best way to insert a line break in text.
How to remove line breaks in TinyMCE
Note: If you want to remove newlines in TinyMCE by changing the rootElement that forms a block - that is, the base element of the HTML block that separates the content to create a line break - can break the functionality of the editor.
To remove line breaks, enclose them withthe forced root lock option, zthe newline behavior option. You can also addRemove Brs option on the rightto clean up extra <br> tags if needed (but this is not included in the demo below).
The following procedure uses an example of aDemo of TinyMCE working in an email builder(one of 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 mediaincorpore codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpintor permanentpen charmap linkchecker emoticons advtable export autosave', toolbar : 'Code | Undo Redo FormatPainter | Visual Blocks | Align Left Center Center Align Right Justify | Font Family Blocks Font Size | Bold Italic Underline Precolor Background Color | Line Height | Remove Format', Height: '400px ', }); </script>Add the following HTML text content to the file:
(Video) Remove Line Breaks or Hard Returns in MS Word & TextEdit
<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 is your email editing project?</h1> <p>Are you:</p> <p><strong>Build a new email client</strong> (i.e. the next Gmail) and need rich text editor functionality?</p> <p><strong>Email marketing software development</strong> strong> (e.g. the next Mail Chimp) and need add more rich text editor functionality or improve the default editor ?</p> <p>Then use the only WYSIWYG editor trusted by 1.5 million 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>">Start 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 settings</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> </ tr> div> </body>Replace the "no-api-key" string in the first script tag with your TinyMCE API key, which you canearn by subscribing(using a Google account or a GitHub account). One of the main benefits of creating content in TinyMCE is the addition of advanced premium features that make your application more enjoyable, such as PowerPaste and image editing.
When you sign up for an API key, you get 14 days of FREE access to premium plugins (like PowerPaste and image editing).
Save Changes.
Remove newlines with TinyMCE
Add TinyMCE JavaScript, introduce the closed_root_block option and configure it to specify the default paragraph tag:
force_root_block: 'p',Add line break behavior option:
(Video) Quickly Remove Extra Line Breaks in Word
newline_behavior: '',Set the line break behavior option to block to prevent line breaks from appearing in the editor when you press Enter:
newline_behavior: 'bloquear',Save your changes and test creating line breaks. You can use the Visual Blocks plugin and the Code plugin to check the effect of removing line breaks from the editor:
How to insert a line break instead of paragraphs
You can completely reverse the behavior of how TinyMCE adds newlines by reversing how the newline behavior works.
Change the Line Break Behavior setting from Block to Line Break (one word, no spaces).
(Video) How to remove unwanted paragraphs and line breaks in Microsoft Word
newline_behavior: 'Newline',- Disable the force_root_block option:
// force_root_block: 'p',Save the change and test the new interrupt options. Line breaks are now <br> tags when pressing Enter or Return:
How to preserve line breaks in the editor
If you want to preserve line breaks and white space caused by <br> tags when exporting editor content,a solution suggested by Jehy on Stack Overflowis to use regex to replace newlines with break tags. This solution can be connected to an event listener that changes the content of the text area before it is exported.
Remove line breaks and other formatting options
If your content creation experience requires fine-grained control over newlines and whitespace, configuring just two settings in TinyMCE's JavaScript can provide a specific newline experience. This removes line breaks, effectively preventing the break tag (<br>) from appearing.
If you want to learn more about design and take the frustration out of content creation, read onthe instructions for inserting special characters in the text area. if you have any questions,Contact us to find out more.about how TinyMCE helps create a better content creation experience.
Get your FREE TinyMCE API Key today to get access to premium TinyMCE plugins for 14 days!