Search code examples
javascripttinymcetinymce-5

Wrap list <li> content inside <p> tag using tinyMCE

I would like the content of my <ul> items to be wrapped inside a <p> tag. So right now TinyMCE is creating lists like this:

<ul>
   <li>Demo</li>
</ul>

While I'm looking for:

<ul>
   <li><p>Demo</p></li>
</ul>

Is this possible in TinyMCE?

Solution

  • There's a few ways you could approach this, for example extending the lists plugin to do what you want or modifying the generated markup prior to using it (sending to the server or whatever).

    The main problem with the first option is that you will no longer be able to easily update the plugin as your version will no longer be an "official" one. That may or may not be an issue for you.

    The second option could be something as simple as:

    const temp = document.createElement('div');
temp.innerHTML = /* your tinymce output */;

const listItems = temp.querySelectorAll('li');

listItems.forEach(li => {
    const p = document.createElement('p');
    p.textContent = li.textContent;
    li.textContent = '';
    li.appendChild(p);
});

return temp.innerHTML; // your modified output

    Code is untested but should give you the general idea. I'd stick it in a wrapLiContents function and run it as part of your form submission (or whatever you're doing with the output).