按钮点击时的多个TinyMCE被初始化并追加,但为什么只有最后一个是可写的?

时间:2021-09-07 作者:Husnain Ahmed

我正在使用一个按钮点击动态添加TinyMCE。一切都在运行,除了一个问题,即只有最后一个问题是可写的。下面是我的HTML

HTML

<div id=\'add_content_box\'></div>
<button id=\'add_more_content_block\' class=\'button\'>Add more content</button>
这是我用来创建和初始化TinyMCE的Javascript。编辑初始化(\'editor\\u id\')

Javascript

var counter = 1;
document.getElementById(\'add_more_content_block\').addEventListener(\'click\', function(e) {
    e.preventDefault();
    var editor_id = "editor_"+counter;

    // document.getElementById(\'wp-editor_0-editor-container\').innerHTML += `<textarea name="_hus_landing_page_content[`+counter+`]" id="editor_`+counter+`" ></textarea>`
    document.getElementById(\'add_content_box\').innerHTML += `<div class="wp-`+editor_id+`-editor-container">
        <textarea class="wp-editor-area" name="_hus_landing_page_content[]" id="`+editor_id+`" ></textarea>
    </div>`;

    wp.editor.initialize(editor_id,{
        mediaButtons: true,
        tinymce: true,
        quicktags: true 
    });
    
    counter++;
});
我还将脚本编入了编辑器的队列。

PHP enqueue script

add_action( \'admin_enqueue_scripts\', \'load_admin_scripts\');
function load_admin_scripts() {
   wp_enqueue_editor();
}
我对WordPress TinyMCE API不太熟悉。

1 个回复
SO网友:Husnain Ahmed

好的,经过几个小时的调试,我终于知道为什么它不工作了。因此,一切都应该按其应有的方式工作,但我的JavaScript中有一个小错误。

Previous JavaScript

var counter = 1;
document.getElementById(\'add_more_content_block\').addEventListener(\'click\', function(e) {
    e.preventDefault();
    var editor_id = "editor_"+counter;

    
    document.getElementById(\'add_content_box\').innerHTML += `<div class="wp-`+editor_id+`-editor-container">
        <textarea class="wp-editor-area" name="_hus_landing_page_content[]" id="`+editor_id+`" ></textarea>
    </div>`;

    wp.editor.initialize(editor_id,{
        mediaButtons: true,
        tinymce: true,
        quicktags: true 
    });
    
    counter++;
});
上述代码的唯一问题innerHTML. 每次调用innerHTML时,它都会重置所有HTML 恢复到原始状态。所以为了避免这种情况,我们必须附加。所以我的最终解决方案是

Final Javascript

var counter = 1;
document.getElementById(\'add_more_content_block\').addEventListener(\'click\', function(e) {
    e.preventDefault();
    var editor_id = "editor_"+counter;


jQuery("#add_content_box").append(\'<textarea id="\'+editor_id+\'" name="content_block[]" class="form-control"></textarea>\');

    wp.editor.initialize(editor_id,{
        mediaButtons: true,
        tinymce: true,
        quicktags: true 
    });

    counter++;
});
其他一切都一样。我希望这会对将来的人有所帮助。

相关推荐

仅在一个页面中使用的JavaScript的本地化

Environment:<WordPress 5.8版WPML:4.4.10版What I am trying to achieve?我有一个JavaScript验证脚本,可以验证注册页面上的输入。此脚本显示错误消息。我想要两件事:字符串应使用WPML进行管理/翻译脚本应仅嵌入注册页面What did I already achieve?我向函数中添加了以下脚本。我的主题的php。add_action(\'wp_enqueue_scripts\', function() { // R