table created using tinymce gives too many hidden newline elements

Question

I have saved a table created inside TinyMCE to the database. When I fetch the content using PHP, it gives too many <br> before the table. If I remove nl2br, then it shows the perfect result but I need nl2br because there may be paragraphs in my text as well.

Database entry:

<p>&lt;table style="border-collapse: collapse; width: 100%; border-style: solid;" border="1"&gt;
&lt;tbody&gt;
&lt;tr style="height: 21px;"&gt;
&lt;td style="width: 50%; text-align: left; height: 21px;"&gt;12th Arts&lt;/td&gt;
&lt;td style="width: 50%; text-align: left; height: 21px;"&gt;31&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</p>

PHP Code to fetch and show

echo '<h2><span>'. htmlspecialchars_decode($pagetitle). '</span></h2>';
echo '<p class="text-justify">'. nl2br(htmlspecialchars_decode($paracolumns)). '</p>';

Code to render TinyMCE

tinymce.init({
    selector:'textarea.mytextarea',
    plugins: [
        "advlist autolink lists link charmap anchor",
        "searchreplace fullscreen",
        "insertdatetime contextmenu paste ",
        "table"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link",
    table_toolbar: 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol',
    table_appearance_options: false,
    menubar: true,
    min_height: 300,
    max_height: 500,
    statusbar: false,
    forced_root_block : false,
    force_br_newlines : true,
    force_p_newlines : false,
    mobile: {
        theme: 'silver',
        min_height: 300,
        max_height: 500,
        menubar: false,
        statusbar: false
        /*
          height: 300,
          max_height: 500,
          max_width: 500,
          min_height: 400,
          statusbar: false,
          toolbar: false,
          plugins: ["autosave", "lists", "autolink"]
          */
    }
})

Output I get

===========================================================

UPDATE

I checked the "View Page Source" windows and got the following output (data might not match the table contents posted above):

<table style="border-collapse: collapse; width: 100%;" border="1"><br />
<tbody><br />
<tr><br />
<td style="width: 33.3333%; text-align: center;"><strong>SNO</strong></td><br />
<td style="width: 33.3333%; text-align: center;"><strong>CLASS</strong></td><br />
<td style="width: 33.3333%; text-align: center;"><strong>STRENGTH</strong></td><br />
</tr><br />
<tr><br />
<td style="width: 33.3333%; text-align: left;">1</td><br />
<td style="width: 33.3333%; text-align: left;">Nursery</td><br />
<td style="width: 33.3333%; text-align: left;">20</td><br />
</tr><br />
<tr><br />
<td style="width: 33.3333%; text-align: left;">2</td><br />
<td style="width: 33.3333%; text-align: left;">1st</td><br />
<td style="width: 33.3333%; text-align: left;">15</td><br />
</tr><br />
<tr><br />
<td style="width: 33.3333%; text-align: left;">3</td><br />
<td style="width: 33.3333%; text-align: left;">2nd</td><br />
<td style="width: 33.3333%; text-align: left;">25</td><br />
</tr><br />
<tr><br />
<td style="width: 33.3333%; text-align: left;">4</td><br />
<td style="width: 33.3333%; text-align: left;">3rd</td><br />
<td style="width: 33.3333%; text-align: left;">50</td><br />
</tr><br />
</tbody><br />
</table>

This means that tinymce appended a <br /> tag after every table's tags, however in inspect element window, it threw out all <br /> out together.

So finally we end up with the requirement of perfectly cleaning these extra `
tags from the output.

NOTE: nl2br() is required because we may press enter while adding data in tinymce in addition to tables. These new lines must be retained as line breaks in output so we cant remove nl2br()

Please read Under what circumstances may I add "urgent" or other similar phrases to my question, in order to obtain faster answers? and find out why it often has the opposite effect. — jps
@berend In my code I have already used the lines written in the article suggested by you. Any other suggestions plz? — ITSagar

Rager Rager · Accepted Answer · 2021-02-09T14:26:54

I would use a combination of pre-processing and post processing here. As per @berend suggestion, before you save to your database you should change the paragraph tags to breaks.

$content = $_REQUEST['content'];
$content = preg_replace('/<p[^>]*>/', '', $content); // Remove the start <p> or <p attr="">
$content = preg_replace('/</p>/', '<br />', $content); // Replace the end
echo $content; // Output content without P tags

Or simply remove <p> tags altogether, since they seem like they're an issue in tinyMce.

That only leaves <textarea> (that I can think of) where paragraphs might be a problem.

So in stead of post processing with nl2b, I would use DomDocument to parse out all the new lines where they are not needed like so

$dom = new DoMDocument();
$dom->loadHTML(htmlspecialchars_decode($paracolumns));
echo '<h2><span>'. htmlspecialchars_decode($pagetitle). '</span></h2>';
echo '<p class="text-justify">'. $dom->saveHTML() . '</p>';

This combination should give you a clean output with "paragraphs" where they are needed.

table created using tinymce gives too many hidden newline elements

2 Answers