使用 tinymce 进行动态内联编辑

Question

我想创建一个 table，其中包含要在其中输入描述的标题和描述，使用 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 进行动态内联编辑

Dynamic inline editing with tinymce

jquery

tinymce