Avoiding the <br> tag in list items with TinyMCE

I am currently using tinyMCE and I needed to enable the "force_br_newlines: true" option. Without this setting, if I press the "Enter" key twice and check the source code, I only see one <br> tag.

However, when I set the option to TRUE, it creates a problem with my unordered list. When the text loaded from my database into tinyMCE looks like:

<ul><li> MY TEXT </li><li> MY TEXT 2 </li><ul>

it transforms into:

<ul><br /><li> MY TEXT </li><br /><li> MY TEXT 2 </li><br /><ul>

Is there any way to prevent this behavior? I want to avoid having the <br /> tags within the content. THANK YOU VERY MUCH FOR YOUR HELP!!!!!

javascripthtmlcsstinymce

Answer №1

A good practice is to avoid using BR elements unless absolutely necessary (which is almost never). Starting from version 3.x, the forced_root_block option is turned on by default, so if you need to disable paragraphs, make sure to disable that setting as well.

To achieve this, include the following code snippet:

tinyMCE.init({
        ...
        force_br_newlines : true,
        force_p_newlines : false,
        forced_root_block : '' // Required for version 3.x
});

By the way, TinyMCE's official page advises against using BR elements for line breaks. You can read more about it here.

Answer №2

Include

tinyMCE.initialize {
    ...
    ...
    apply_formatting_source : false
}

Answer №3

Have you added 'lists' to the plugins settings?

tinymce.init({
    plugins: "lists link stylebuttons", // This is just an example
    // ...
});

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

Jest - experiencing intermittent test failures on initial run, yet succeeding on subsequent runs

Writing tests with jest and supertest npm on a node server has been a challenge for me. When I try to run all the tests together, some of them fail inexplicably: https://i.sstatic.net/TWDVp.png However, if I selectively run only the failed tests in the t ...

javascriptnode.jstestingjestjssupertest

Guide on forwarding from one HTML page to another in the local disk

Currently, I am working on an employee appraisal application where users can submit appraisals that are stored in the backend. The initial page is a login screen. Once the user successfully logs in, they should be redirected to another page displaying in ...

htmlapache

Is it possible to generate a table without any grid lines present?

Currently, I am in the process of designing a table that will function as a popup when a link is clicked within my imported SQL table. An example of this table is included with this message for reference. After conducting thorough research, I attempted to ...

htmlcssbootstrap-4bootstrap-modal

Having difficulty uploading an image to Facebook through the graph API

I have a requirement to upload a photo to Facebook using the Javascript SDK, but I am experiencing some difficulties: Firstly, FB.login(function (response) { if (response.authResponse) { va ...

javascriptfacebookfacebook-graph-api

Customize your payment with a PayPal button tailored to your desired price

I've been tasked with creating a dynamic PayPal button that can receive different values based on user choices. The website has so many options that creating separate buttons for each choice doesn't seem feasible. I've tried researching solu ...

javascriptphphtmlpaypal

Exploring the depths of Javascript objects using Typescript

If I have this specific dataset: data = { result: [ { id: '001', name: 'Caio B', address: { address: 'sau paulo', city: 'sao paulo', ...

javascriptjsontypescript

Error occurs when trying to create or delete a folder in Express.js

Implement Folder Creation Code in index.js let companydir = './views/campaigns/' + companyname; if(!fs.existsSync(companydir, { recursive: true })) { fs.mkdirSync(companydir, { recursive: true }); } var dir = companydir + &apo ...

javascriptnode.jsexpress

creating an HTML table from JSON data using a specific key

In this json file, I am looking to create separate tables based on the IDs provided. For example, ID: "50" should be displayed in one table, while ID: "57" should be shown in another table within the same context. { "version": "5.2", "user_type": ...

javascriptjqueryhtmljson

The variable 'firebase' is nowhere to be found

I am encountering an issue with the error message 'Can't find variable: firebase' and I am struggling to identify the cause of this error. I have installed firebase using 'yarn add firebase' and double-checked that it is properly i ...

javascriptfirebasevue.jsnuxt.js

Dynamic route fails to return value for ID search

Currently, I am testing by creating an array of users containing their respective IDs and names. There is also a button that triggers an onclick function to add the element's ID to the page's URL in order to establish a dynamic route. However, wh ...

javascriptnext.js

Identifying and locating white-colored text within an HTML document

My HTML file has the following structure: <HTML> <HEAD> <style> .secret { background-color: black; color: black; } </style> </HEAD> <BODY ...

pythonhtml

What is the reason for restricting AJAX requests to the same domain?

I'm puzzled by the limitation of AJAX requests to the same domain. Can you explain the reasoning behind this restriction? I don't understand why requesting files from external locations is an issue, especially since servers making XMLHTTP reques ...

javascriptajaxxsssame-origin-policy

What is the best way to synchronize the image dimensions and source when dynamically loading images?

I am facing an issue with a function that updates images by altering the src and css (width/height) of an IMG tag within the document. Below is a simplified example to demonstrate the problem: updateImage = function(src, width, height) { $("#changeMe"). ...

javascriptjquerycssimage

What sets the Virtual DOM apart from the Shadow DOM?

During my exploration of Vue.js, I delved into the realm of shadow DOM to grasp the essence of a fundamental Vue.js Component. As I studied shadow DOM and its similarities to virtual DOM, I embarked on a quest for diverse information pertaining to both con ...

htmlreactjsdomvue.js

It is not possible to simultaneously utilize the properties `display: inline-block` and `width: 100%`

As someone with limited CSS knowledge, I have encountered a challenge. My goal is to ensure that my website's body has a width of 100%, while also preventing the content from wrapping when the browser window is resized. To achieve this, I attempted a ...

htmlcssstyleswidthinline

Is there a way to dynamically integrate the Insert Column feature into the ContextMenu of a Syncfusion Treegrid?

What is the best way to add Insert Column functionality to the ContextMenu of a Syncfusion Treegrid? Insert Column Rename Column Delete Column ...

javascriptsyncfusion

It is not possible to submit two forms at once with only one button click without relying on JQuery

I need to figure out a way to submit two forms using a single button in next.js without relying on document.getElementById. The approach I've taken involves having two form tags and then capturing their data in two separate objects. My goal is to hav ...

javascriptreactjsnext.js

What is the best way to pass a variable and its corresponding state-updating function as a prop in a React component?

Considering I have a variable defined as follows: const [APIKey, setAPIKey] = useState([]) Is it possible to group these together into a single variable and then pass it as a prop? const passAPI = {APIKey, setAPIKey} Here is my approach to passing it alo ...

javascriptreactjs

Understanding the Hierarchy of CSS and Bootstrap Styles

I have been using a custom CSS file along with bootstrap. Initially, I had my custom CSS written before the Bootstrap CSS. However, I recently discovered that it's recommended to include Bootstrap CSS first before any custom CSS. As a result, I'm ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing dynamic attributes in design with bootstrap and CSS. Our capabilities are limited in executing actions through selenium

https://i.stack.imgur.com/Bwbgh.jpg Upon reviewing the code snippet above, I have made an attempt to locate elements and execute actions in Selenium. Actions action = new Actions(driver); Initiating Control on Elements WebElement we = driver. ...

cssselenium