在 Wordpress 中保存小部件后 TinyMCE 消失

Posted 2023-05-09

【中文标题】在 Wordpress 中保存小部件后 TinyMCE 消失

【英文标题】：TinyMCE disappears after save Widget in Wordpress

【发布时间】：2017-06-28 14:03:15

【问题描述】：

首先，对不起我的英语不好，我来自德国。

我刚刚创建了我的第一个小部件。它是一个从列表中自动创建网格的小部件。

我可以添加一个新的列表项，每个表单字段都会被复制。 但是在网上搜索了3天没有结果后，我决定自己问... 所以这是我的第一个问题，当我添加一个新项目时，新项目中的 TinyMCE 被禁用，我无法单击按钮或在其中输入文本。 控制台日志中没有错误。

我的第二个问题是当我保存小部件时，所有 TinyMCE 编辑器都会消失并留下文本区域，并带有 html 代码。

这里也：没有错误...但我已经看到，保存后 TinyMCE 没有加载。没有 iframe，只有 textarea。

重新加载小部件页面后，这两个问题都再次正常。 所以我必须添加新项目并保存页面，然后重新加载以编辑和编辑内容，但这并不能解决问题。

我想我必须重新初始化 TinyMCE，但我不知道怎么做。

我在将 wordpress 编辑器添加到我的小部件时遇到了问题，因此我从网站上集成了 jQuery TinyMCE。

这是我的 add-function 的代码 sn-p：

$("body").on('click.sgw','.sgw-add',function()  
    var sgw = $(this).parent().parent();
    var num = sgw.find('.simple-grid .list-item').length + 1;

    sgw.find('.amount').val(num);

    var item = sgw.find('.simple-grid .list-item:last-child').clone();
    var item_id = item.attr('id');
    item.attr('id',increment_last_num(item_id));

    $('.toggled-off',item).removeClass('toggled-off');
    $('.number',item).html(num);
    $('.item-title',item).html('');
    $('.custom_media_image',item).attr('src','');
    $('textarea',item).val('');
    $('img.custom_media_image',item).each(function() 
        var class_val = $(this).attr('class');
        $(this).attr('class',increment_last_num(class_val));
    );

    $('textarea',item).each(function() 
        var id_iframe = $(this).attr('id');
        tinymce.EditorManager.execCommand('mceRemoveEditor',true, id_iframe);
        tinymce.EditorManager.execCommand('mceAddEditor',true, id_iframe);
    );


    $('label',item).each(function() 
        var for_val = $(this).attr('for');
        $(this).attr('for',increment_last_num(for_val));
    );
    $('input',item).each(function() 
        var id_val = $(this).attr('id');
        var name_val = $(this).attr('name');

        $(this).attr('id',increment_last_num(id_val));
        $(this).attr('name',increment_last_num(name_val));

        if($(':checked',this))
           $(this).removeAttr('checked');
        
        if($(this).hasClass('custom_media_button') || $(this).hasClass('custom_media_url'))
           var class_val = $(this).attr('class');
           $(this).attr('class',increment_last_num(class_val));
        
        if($(this).hasClass('button-primary'))
           var number_val = $(this).attr('number');
           $(this).attr('number',increment_last_num(number_val));
        
        $(this).not('#custom_media_button').val('');
    );

    sgw.find('.simple-grid').append(item);
    sgw.find('.order').val(sgw.find('.simple-grid').sortable('toArray'));
);

我希望这是可以理解的，有人可以帮助我。 你可以在这里下载压缩包：https://www.dropbox.com/s/22b8q29v94n7mdj/simple-grid-widget.zip?dl=0

【参考方案1】：

您是否要同时运行多个编辑器？ Wordpress 和 TinyMCE 有一个限制，您基本上一次只能使用一个编辑器。我已经解决了这个问题，但这非常困难。

要加载新编辑器，您可能需要删除旧编辑器：

 tinymce.remove();