Question

我想创建一个表，其中包含使用TinyMCE输入描述的标题和描述。我已经成功地将TinyMCE用于静态代码html。和TinyMCE秀。

<script type="text/javascript" src="<?=$basedomain?>app/js/tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
     tinymce.init({
         selector: "div.editor",
         plugins: [
             "table"
         ],
         inline:true,
         toolbar1: "bold italic underline",
         toolbar2: "styleselect formatselect fontselect fontsizeselect table",
         menubar: false,
         toolbar_items_size: 'small'
      });
</script>
....
<tr>
    <td>Title</td>
    <td><input type="text" name="title[]"/></td>
    <td>Description</td>
    <td><div class="editor" id="description"></div></td>
</tr>
.....

但是我想让textarea成为一个动态的，我已经能够显示该区域，但TinyMCE没有出现。

$("img#add").click(function(){
        var html = '<tr>'+
                        '<td>Title</td>'+
                        '<td>'+
                            '<input type="text" name="title[]"/>'+
                        '</td>'+
                        '<td>Description</td>'+
                        '<td>'+
                            '<div class="editor" id="description"></div>'+
                        '</td>'+
                    '</tr>';
        $('.book_table tr#title').last().after(html);
    });

示例我创建了一个您可以在此处看到的表单的 jsfiddle

Answer 1

尝试将这些事件绑定为tinymce。

$("img#add").click(function(){
 var d = new Date();
 var n = d.getMilliseconds(); 
 var txtAreaId = "description_"+n;

 var html = '<tr>'+
                        '<td>Title</td>'+
                        '<td>'+
                            '<input type="text" name="title[]"/>'+
                        '</td>'+
                        '<td>Description</td>'+
                        '<td>'+
                            '<div class="editor" id='+txtAreaId+' ></div>'+
                        '</td>'+
                    '</tr>';

  tinymce.execCommand('mceAddEditor', false, txtAreaId); 

  $('.book_table tr#title').last().after(html);
});

Answer 2

经过一天的工作，我终于找到了解决方案：D。感谢@riad给了我很多帮助。刚才说：

$('.book_table tr#title').last().after(html).ready(function(){
     tinyMCE.execCommand('mceAddEditor', false, txtAreaId);
});

谢谢你们所有人。你可以在这里看到结果：

jsfiddle

使用tinymce进行动态内联编辑

2 个答案: