php - 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

question from:https://stackoverflow.com/questions/65933547/table-created-using-tinymce-gives-too-many-hidden-newline-elements

Answer 1

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.