在数据表的子行中添加TinyMCE编辑器

Question

我想知道TinyMCE是否能够在子行中工作。就我而言，每行都有一个子行，我想在每个子行中添加一个TinyMCE编辑器。

问题是，如屏幕截图所示，显示子行时TinyMCE不起作用，我只能看到没有TinyMCE图标，工具栏等的文本区域。我简化了相关代码，并附在下面：

<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>';

最终成功了，我附加了快照。

Answer 1

我在这里注意到两件事...

1-您似乎正在插入带有硬编码ID的textarea。 ID在页面内应该是唯一的，因此，如果您不止一次运行格式代码，就会遇到问题。

2-将HTML添加到页面后，您需要运行tinymce.init({})。您上面的代码似乎在运行init方法，但它与将HTML插入页面无关。您不希望在init成为DOM的一部分之后运行textarea。