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><table style="border-collapse: collapse; width: 100%; border-style: solid;" border="1">
<tbody>
<tr style="height: 21px;">
<td style="width: 50%; text-align: left; height: 21px;">12th Arts</td>
<td style="width: 50%; text-align: left; height: 21px;">31</td>
</tr>
</tbody>
</table></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()