How to eliminate the "br" tags automatically inserted after each paragraph in TinyMCE version 6

I have been trying to work with TinyMCE version 6 and I am struggling to prevent the addition of <br> after each paragraph.

Whenever I insert a line of text and press enter, a new paragraph is created but there is always a <br> added between them. In the previous versions of TinyMCE, I used to include these two parameters:

  • force_p_newlines = true;
  • forced_root_block = false;

However, both of these parameters are now deprecated and I cannot find a way to achieve the same outcome.

The documentation states that force_p_newlines is no longer supported and that forced_root_block should be used instead. Even when setting forced_root_block: "p" (which should already be default), I see no changes.

I attempted to change the default tag from <p> to <div>, yet I still notice the presence of <br> nested between the various <div> in the output.

Here is my current initialization code:

tinymce.init({
  selector:'#myTextarea',
  plugins: "link",
  toolbar: "undo redo | bold italic link ",
  menubar: false,
  forced_root_block: "p",
    forced_root_block_attrs: {
      class: "m-0",
    },
  force_br_newlines: false,
});

Additionally, I am utilizing bootstrap 5 and have utilized the forced_root_block_attrs attribute to remove margin from paragraphs by assigning the class "m-0" to all <p> tags

Answer ā„–1

    tinymce.init({
  selector:'#myTextarea',
  plugins: "link",
  toolbar: "undo redo | bold italic link ",
  menubar: false,
  forced_root_block: "",
    forced_root_block_attrs: {
      class: "m-0",
    },
  force_br_newlines: true,
force_p_newlines: false,
});

Have you considered giving this a try? It might just work! 

Answer ā„–2

I managed to figure it out by utilizing tinymce version 6

tinymce.init({
    selector: '#editor-texto',
    language: 'pt_BR',
    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
    forced_root_block: true,
    setup: function(editor) {
      editor.on('keydown', function(e) {
        if (e.keyCode === 13) {
          e.preventDefault();

          tinymce.activeEditor.execCommand('InsertLineBreak');
        }
      });
    }
  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Uncertain about the ins and outs of AJAX

I am a complete beginner in web development. Although I have studied JavaScript and HTML through books, my understanding is still limited. I have never worked with AJAX before and find most online examples too complex for me to follow. My goal is to crea ...

What is the best way to call a JavaScript function within a PHP echo statement that outputs a <div> element?

Having trouble echoing this PHP code due to issues with single quotes, causing the HTML to end prematurely. Any suggestions on how to fix this? function button($conn){ $sql = "SELECT * FROM table"; $result= mysqli_query($conn, $sql); while($r ...

Retrieve the date from the event

Incorporating fullcalendar v2.0.2, I am currently developing a copy/paste system for events. By right-clicking, I am able to copy the event with the help of a small menu. Upon right-clicking on the calendar during a week view, I am tasked with calculating ...

`How can I activate caching for getServerSideProps in Next.js?`

We have implemented server-side rendering for a few pages and components. In an attempt to optimize performance, we have been experimenting with caching API responses. export async function getServerSideProps(context) { const res = await getRequest(API ...

What is the best way to implement a 5-second delay after the timer reaches 00:00?

I am in the process of creating a countdown timer for an application. Once the timer reaches 00:00, I would like to add a 5-second delay before it starts counting down again. How can I achieve this using setTimeout()? function initiateTimer(duration, di ...

Distributing Back-end Information to a JavaScript File

Recently, I developed a blog site from scratch that includes features such as posts, users, and comments. To build this site, I utilized MongoDB, NodeJS, and Express while implementing an EJS view. However, I encountered an issue when attempting to create ...

Django DRF functions properly, however it returns an error when sending a response to an AJAX request

Successfully implemented an AJAX request using PUT in DRF. All functionalities are functioning correctly except for the error callback being triggered: DRF section: class ProductDataViewSet(viewsets.ViewSet): authentication_classes = [SessionAuthentic ...

Content in static JSON file failing to display in NextJS

I recently started using Next, and I've encountered an issue. There is a static JSON file located in the root of my project directory, structured as follows: {"data":[{"id":1,"attributes":{"name":"Test Prod ...

How to format numbers in JavaScript post calculations

Struggling to find a solution to format calculation results with commas for thousand separators (e.g., 10,000). After implementing the .toLocaleString('en-US', {maximumFractionDigits:1}); method to format numbers in the output, I encountered unex ...

Troubleshooting ASP.NET Ajax Error Code 0

Starting from scratch with asp.net and hoping to incorporate infinite scrolling using jQuery Ajax and ASP.NET MVC. Here's the progress so far: <div id="container"></div> <div id="progress" style="display:none"> <h4>Loading ...

Can you explain the concept of "excluded" in relation to project subdirectories on Webstorm?

When using Webstorm, you have the option to mark project subdirectories as "excluded". However, the full implications of this designation remain unclear in the Webstorm documentation. Does marking a directory as excluded impact debugging or deployment proc ...

What is the most effective way to divide input elements into an array in Angular?

How can I bind an input value to an ng-model as an array? For example, if I enter one, two, three, I want the resulting model to be [ "one","two","three" ]. Currently, this is my approach: <input type="text" ng-model="string" ng-change="convertToArra ...

Press the button in an HTML document to activate JavaScript

What could be the issue with my code? I have a button in HTML <a class="btn btn-warning btn-mini publish-btn" href="#" data-rowid="@computer.id" data-toggle="modal" data-target="#myModal">Outdated</a> and my modal <fieldset style="text-al ...

How can I turn off credential suggestions in a React JS application?

Is there a way to disable managed credential suggestion on a React JS web page using a browser? I have tried using the autoComplete=off attribute and setting editable mode with an onFocus event, but the password suggestions are still appearing. Any help wo ...

Combining JSON arrays into a single multidimensional array

I have received the following JSON data from an API, and unfortunately, I do not have control over its format. Hence, changing the format is not feasible for me. I am facing difficulty in combining this JSON data into a single JSON array. My goal is to pr ...

Is using canvas the best option for creating simple image animations with JavaScript?

I am currently working on a basic animation project using JavaScript. This animation involves switching between 13 different images per second to create movement. I have created two simple methods for implementing this animation. The first method involves ...

Customize Vuetify Menu by adding a unique custom keypad component for editing text fields

I am currently developing an app using vuetify, and I am encountering some challenges with the v-menu feature. The issue arises when I click on a text input field, it triggers the opening of a v-menu. Within this menu, there is a custom component that I h ...

What is the best way to create a feature in Vue that filters options in real-time as we type into a

In my Vue application, I am trying to implement dynamic filtering for the options in a search box as the user types. Currently, the search box displays the entire list of options without any filtering happening even when the user is typing. <el-form-it ...

What are the steps needed to establish a distinct data scope in AngularJS along with the application of filters?

Iā€™m currently practicing my skills in AngularJS and I have been experimenting with creating reusable components. At this stage, I have successfully created a component using the directive method. However, I now have some doubts that I need clarification ...

Encountering a "403 Forbidden" error upon deployment to the server due to

Situation: I am developing a website using Spring web MVC, JSP, and HTML/JavaScript. One of the features I have implemented is a search function that communicates with imdbapi.org to retrieve movie/TV show information in JSON format via AJAX. The JSON resp ...