add TinyMCE editor in child-row

zhishang0001

Hello:

I am wondering whether TinyMCE is able to work in a child row. In my case, I have a child-row for each row, and I want to add a TinyMCE editor in each child-row.

The problem is that, as shown in screenshot, TinyMCE does not work when child-row is shown, I can only see a textarea there without TinyMCE icons, toolbar etc. I simplified the relevant code and attached below:

<script type="text/javascript">
tinymce.init({
selector: '#email_editor',
statusbar: false,
menubar: false,
theme: 'modern',
plugins: "advlist lists image textcolor code paste",
height: 150,
toolbar: 'formatselect outdent indent bold italic strikethrough | forecolor backcolor |
alignleft aligncenter alignright | numlist bullist'
});
</script>

$('#labmeetingrecord tbody').on('click', 'td.edit_button', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
row.child.hide();
tr.removeClass('shown');
}
else {
row.child(format()).show(); //format(row.data())
$(row.child()).addClass('smalltable');
tr.addClass('shown');
}
});

function format ( ) {
return
'<table width:100% cellpadding="0" cellspacing="0" id="child_table" border="0">' +
'<tr>'+
'<td>'+
'<textarea id="email_editor"></textarea>'+
'</td>'+
'</tr>'+
'</table>';

Could anyone please give any hint?

Thanks

colin

Hi @zhishang0001 ,

I haven't got any experience of TinyMCE I'm afraid, but at a glace your code does look like it's doing what it's coded to do. A child row is created in the format() function - and this is just creating a textarea and nothing else. Also, all textareas are being given the same ID which isn't good, they should be unique.

Hope that helps,

Cheers,

Colin

zhishang0001

Thanks a lot, what you suggest is correct, but one more thing is needed, which is that I need to run tinymce.init({}) after the HTML is added to the page as suggested in the link below:

https://stackoverflow.com/questions/51960309/add-tinymce-editor-in-child-row-of-datatables

colin

Excellent. That's easy to move - shift the code in that first script block (the tinymce.init() function) to where you add the two classes to the newly created child. You'll also need to ensure the ID for that child is correct when you call the initialisation (and also to ensure it's unique).

C

jamu

i want this code into js fiddle pls send it