我正在使用一个按钮点击动态添加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不太熟悉。
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++;
});
其他一切都一样。我希望这会对将来的人有所帮助。