'Add Media' button doesn't work when editor is initialized from javascript

admin管理员组

文章数量:1130349

I am trying to instantiate the wp_editor with javascript, which works nicely except the 'Add Media' button does not work. There are no errors, but clicking the button does nothing.

The simplest test case I can think of it to add the editor to the comments form, which I did via this code in a twentynineteen child theme with completely stock content (using the Hello World! post to test).

add_action('wp_enqueue_scripts', function() {
  if ( is_single() && comments_open() ) {
    wp_enqueue_editor();
  }
});

add_action('wp_footer', function() {
?>

<script type="text/javascript">
  var editorSettings = {
    mediaButtons: true,
    tinymce: true,
    quicktags: true
  };

  jQuery(function($){
    $(document).ready(function() {
      wp.editor.initialize( 'comment', editorSettings );
    });
  });

</script>

<?php
}, 100);

The mediaButtons setting does act to show/hide the button itself, but is not functional.

I have the problem on a 4.9.8 site (custom theme), both on the comments field and on other textareas I have tried. The simplified test (above) was 5.0, and the same symptom is exhibited with and without the Classic Editor plugin enabled.

I have tried printing the editor via wp_editor() in php, and the Add Media button works fine then (eg. for the comments field), but that is not an option other than for testing, as the textareas I need to use are added dynamically via javascript.

Does anyone have any ideas to try, or would anyone have a configuration where instantiating the editor via wp.editor.initialize() results in a working 'Add Media' button?

I am trying to instantiate the wp_editor with javascript, which works nicely except the 'Add Media' button does not work. There are no errors, but clicking the button does nothing.

The simplest test case I can think of it to add the editor to the comments form, which I did via this code in a twentynineteen child theme with completely stock content (using the Hello World! post to test).

add_action('wp_enqueue_scripts', function() {
  if ( is_single() && comments_open() ) {
    wp_enqueue_editor();
  }
});

add_action('wp_footer', function() {
?>

<script type="text/javascript">
  var editorSettings = {
    mediaButtons: true,
    tinymce: true,
    quicktags: true
  };

  jQuery(function($){
    $(document).ready(function() {
      wp.editor.initialize( 'comment', editorSettings );
    });
  });

</script>

<?php
}, 100);

The mediaButtons setting does act to show/hide the button itself, but is not functional.

I have the problem on a 4.9.8 site (custom theme), both on the comments field and on other textareas I have tried. The simplified test (above) was 5.0, and the same symptom is exhibited with and without the Classic Editor plugin enabled.

I have tried printing the editor via wp_editor() in php, and the Add Media button works fine then (eg. for the comments field), but that is not an option other than for testing, as the textareas I need to use are added dynamically via javascript.

Does anyone have any ideas to try, or would anyone have a configuration where instantiating the editor via wp.editor.initialize() results in a working 'Add Media' button?

• wp-editor
• media-modal

Share Improve this question edited Dec 8, 2018 at 0:26 Jesse Norell asked Dec 8, 2018 at 0:15 Jesse NorellJesse Norell 9377 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 5

The solution was to call wp_enqueue_media() along with wp_enqueue_editor().

I am trying to instantiate the wp_editor with javascript, which works nicely except the 'Add Media' button does not work. There are no errors, but clicking the button does nothing.

The simplest test case I can think of it to add the editor to the comments form, which I did via this code in a twentynineteen child theme with completely stock content (using the Hello World! post to test).

add_action('wp_enqueue_scripts', function() {
  if ( is_single() && comments_open() ) {
    wp_enqueue_editor();
  }
});

add_action('wp_footer', function() {
?>

<script type="text/javascript">
  var editorSettings = {
    mediaButtons: true,
    tinymce: true,
    quicktags: true
  };

  jQuery(function($){
    $(document).ready(function() {
      wp.editor.initialize( 'comment', editorSettings );
    });
  });

</script>

<?php
}, 100);

The mediaButtons setting does act to show/hide the button itself, but is not functional.

I have the problem on a 4.9.8 site (custom theme), both on the comments field and on other textareas I have tried. The simplified test (above) was 5.0, and the same symptom is exhibited with and without the Classic Editor plugin enabled.

I have tried printing the editor via wp_editor() in php, and the Add Media button works fine then (eg. for the comments field), but that is not an option other than for testing, as the textareas I need to use are added dynamically via javascript.

Does anyone have any ideas to try, or would anyone have a configuration where instantiating the editor via wp.editor.initialize() results in a working 'Add Media' button?

I am trying to instantiate the wp_editor with javascript, which works nicely except the 'Add Media' button does not work. There are no errors, but clicking the button does nothing.

The simplest test case I can think of it to add the editor to the comments form, which I did via this code in a twentynineteen child theme with completely stock content (using the Hello World! post to test).

add_action('wp_enqueue_scripts', function() {
  if ( is_single() && comments_open() ) {
    wp_enqueue_editor();
  }
});

add_action('wp_footer', function() {
?>

<script type="text/javascript">
  var editorSettings = {
    mediaButtons: true,
    tinymce: true,
    quicktags: true
  };

  jQuery(function($){
    $(document).ready(function() {
      wp.editor.initialize( 'comment', editorSettings );
    });
  });

</script>

<?php
}, 100);

The mediaButtons setting does act to show/hide the button itself, but is not functional.

I have the problem on a 4.9.8 site (custom theme), both on the comments field and on other textareas I have tried. The simplified test (above) was 5.0, and the same symptom is exhibited with and without the Classic Editor plugin enabled.

I have tried printing the editor via wp_editor() in php, and the Add Media button works fine then (eg. for the comments field), but that is not an option other than for testing, as the textareas I need to use are added dynamically via javascript.

Does anyone have any ideas to try, or would anyone have a configuration where instantiating the editor via wp.editor.initialize() results in a working 'Add Media' button?

• wp-editor
• media-modal

Share Improve this question edited Dec 8, 2018 at 0:26 Jesse Norell asked Dec 8, 2018 at 0:15 Jesse NorellJesse Norell 9377 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 5

The solution was to call wp_enqueue_media() along with wp_enqueue_editor().

本文标签： 39Add Media39 button doesn39t work when editor is initialized from javascript