0

I am using a button click to add TinyMCE dynamically. Everything is working except only one issue is that only the last one is writeable. Below is my HTML

HTML

<div id='add_content_box'></div>
<button id='add_more_content_block' class='button'>Add more content</button>

and this is my Javascript to create and initialize TinyMCE wp.editor.initialize('editor_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++;
});

I also have enqueued the scripts for editor.

PHP enqueue script

add_action( 'admin_enqueue_scripts', 'load_admin_scripts');
function load_admin_scripts() {
   wp_enqueue_editor();
}

I am not much familiar with WordPress TinyMCE API.

6
  • where does counter come from? It just appears out of nowhere with no definition or initial value, can you include where it's first defined? You should also avoid constructing HTML by joining up strings for security reasons, it would be much safer and faster to create Dom nodes properly. What does your browsers error console say?
    – Tom J Nowell
    Sep 7 at 19:40
  • Okay, I added the code for var counter = 1 I missed it while adding my code and there is no error in my console so far. Sep 7 at 19:47
  • And when you say it isn't editable can you be more specific? Your changes don't get saved? You're typing but nothing appears? Errors? you can't select inside the instance? It's disabled? Be very specific/precise/detailed
    – Tom J Nowell
    Sep 7 at 19:54
  • I strongly suspect this approach is a non-starter and that wp.editor doesn't support this use case
    – Tom J Nowell
    Sep 7 at 19:58
  • Infact I suspect this is an indirect duplicate of wordpress.stackexchange.com/questions/59762/…
    – Tom J Nowell
    Sep 7 at 19:59
0

Ok, with many hours of debugging and I finally came to know why it was not working. So everything is supposed to work the way it should be but there was a minor mistake in my 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++;
});

The only problem with the above code innerHTML. Everytime you call innerHTML, it will reset all of your HTML back to the original condition. So to avoid this, we have to append. So my final solutions is this

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++;
});

Everything else will be the same. I hope that will help someone in the future.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.