I have a platform that allows individuals to create their own online forms. The structure of these forms are stored in a JSON format, and then this data is used to render the form to the end-user. When building a form, you have the option to use TinyMCE for textareas, to allow rich-text content.
Incomplete forms can be saved for future completion. In this instance, the JSON is again saved, but this time including an additional userData array which contains all the data that has been entered so far. When a user continues, this JSON is then reloaded, and fields are automatically populated with their existing data.
This all works fine. It also works fine for TinyMCE instances – except when it involves a table.
It’s somewhat hard to explain, so I have provided an example.
The following is a rendered form and I have inserted some data
The code used to generate (the empty) form is:
var formData = ‘[{“type”:”text”,”required”:false,”label”:”A Text Field”,”className”:”form-control”,”name”:”text-1640899516795″,”subtype”:”text”},{“type”:”textarea”,”subtype”:”tinymce”,”required”:false,”label”:”TinyMCE Text Area”,”className”:”form-control”,”name”:”textarea-1640638516810″}]’;
The TinyMCE element will show the following source code for the table I have entered:
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 31.5117%;">header 1</td>
<td style="width: 31.5117%;">header 2</td>
<td style="width: 31.5138%;">header 3</td>
</tr>
<tr>
<td style="width: 31.5117%;">Entry 1</td>
<td style="width: 31.5117%;">Entry 2</td>
<td style="width: 31.5138%;">Entry 3</td>
</tr>
</tbody>
</table>
Now, if I save the form and reload, the form is populated with my data – except, as you will see, the table is messed up.
The source displayed by TinyMCE is:
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 31.5117%;">header 1</td>
<td> </td>
<td>Entry 31.5138%;">Entry 3</td>
</tr>
</tbody>
</table>
The JSON being used to generate the form looks like this:
var formData = ‘[{“type”:”text”,”required”:false,”label”:”A
Text
Field”,”className”:”form-control”,”name”:”text-1640899516795″,”subtype”:”text”,”userData”:[“whatever”]},{“type”:”textarea”,”subtype”:”tinymce”,”required”:false,”label”:”TinyMCE
Text
Area”,”className”:”form-control”,”name”:”textarea-1640638516810″,”userData”:[“<table
style=”border-collapse: collapse; width: 100%;”
border=”1″>rnrnrn<td style=”width:
31.5117%;”>header 1rn<td style=”width: 31.5117%;”>header 2rn<td style=”width: 31.5138%;”>header 3rnrnrn<td style=”width: 31.5117%;”>Entry 1rn<td style=”width:
31.5117%;”>Entry 2rn<td style=”width: 31.5138%;”>Entry 3rnrnrn”]}]’;
I’m working on the basis that something in the above is breaking the rendering, but I can’t work out what. Equally, this issue only seems to occur when using tables. You can go wild with formatting in TinyMCE and it will always render correctly after saving – unless you use a table.
I appreciate I’m using a lot of custom rendering here, but can anyone help me narrow down where things are going wrong?