加载内容的内联编辑器绑定

时间:2016-01-13 16:04:35

标签: jquery html html-table tinymce

我正在尝试制作电子邮件模板构建器,而我正在使用tinyMCE 4.3.2。 我需要一个关于将编辑器绑定到div的简单解决方案。

步骤:

1)我使用jquery.load

加载HTML块

2)我查看这个加载的HTML块,并给它一个唯一的ID(如id-234234324

3)然后我将tinyMCE“inline”编辑器绑定到这个div。

它正常工作。

但是当我加载的HTML块包含“TABLE”时,TinyMCE没有绑定到调整表格单元格的操作。

代码: 1)我正在将项目拖动到模板区域

function draggingEnds(ui, templatePath, editorType) {

$(ui.helper).load(templatePath, '', function (body) {
    var rand = parseInt(Math.random() * 1000000000).toString();
    var newId = 'id-' + rand;
    $(body).insertAfter($(ui.helper)).find("div").attr("id", newId);
    $(ui.helper).remove();
    $("#template > *").bind("mouseover");
    bindSortable();
    if (editorType != "none") { bindEditor(newId, editorType); };
});};

2)然后我使用bindEditor()函数

绑定内联tinyMCE编辑器
function bindEditor(id) {

tinymce.init({
    selector: '#' + id,
    language: 'tr',
    inline: true,
    plugins: 'advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table contextmenu paste',
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
});}

3)加载HTML

<li>
<aside class="item-actions">
    <span class="handle" href="#"><i class="fa fa-arrows"></i> Taşı</span>
    <span class="copy" href="#"><i class="fa fa-file-o"></i> Kopyala</span>
    <span class="delete" href="#"><i class="fa fa-trash-o"></i> Sil</span>
</aside>
<div>
    <table>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

如您所见,tinyMCE未为单元格设置“调整大小操作”:

0 个答案:

没有答案