wp.editor.initialize not working as expected

Question

wp.editor.initialize not working as expected

Rice_Crisp

2021年12月7日 07:35

I run a function to rename draggable/sortable items in a list, and I'd like it if the items could have a wysiwyg editor in them. I saw that some new javascript functions were introduced with 4.8, so I tried them out. Unfortunately, I can't seem to get them to work properly with dynamic elements. Here's the function that runs in the footer:

// Check order of sortable items
var checkOrder = (function checkOrder() {
  jQuery('.sortable-container').each(function() {
    jQuery(this).find('.sortable-item').each(function(i) {
      jQuery(this).find('label').each(function() {
        if (jQuery(this).attr('for')) {
          var oldFor = jQuery(this).attr('for');
          jQuery(this).attr('for', oldFor.replace(/\d+/g, i));
        }
      });
      jQuery(this).find('input, textarea').each(function() {
        if (jQuery(this).attr('id')) {
          var oldId = jQuery(this).attr('id');
          jQuery(this).attr('id', oldId.replace(/\d+/g, i));
        }
        if (jQuery(this).attr('name')) {
          var oldName = jQuery(this).attr('name');
          jQuery(this).attr('name', oldName.replace(/\d+/g, i));
        }
      });
    });
  });
  jQuery('.wp-editor').each(function() {
    wp.editor.initialize(this.id, {
      tinymce: true,
      quicktags: true
    });
  });
  return checkOrder;
}());

The sorting itself works; item id's and name's are changed correctly, but when I try to run wp.editor.initialize, nothing happens. If I run it again after the fact, then it creates 2 editors on top of each other, so it must be running to an extent, but not completely. I've attempted to use the javascript functions in other contexts with similar results: works sometimes or doesn't fully initialize. Any ideas what's wrong or how I can fix it?

UPDATE:

Ok, I think I've figured out the issue, but I'm not sure how to fix it. I don't know how to make my script dependent on wp_enqueue_editor(), specifically the script created in class-wp-editor.php. Currently it's loading after my script. As Jarocks pointed out, it's the class-wp-editor.php that defines the wp.editor.getDefaultSettings (which is where my editor.js was failing before).

Topic wp-editor Wordpress

Category Web

Jay Maharjan · Accepted Answer · 2021年12月7日 07:35

I have encounter the same issue after doing ajax call and found out that before initializing the editor we need to remove the editor call if we have already initialized editor in php and then only we need to initialize the editor

wp.editor.remove(editorID);
wp.editor.initialize(editorID, {
    tinymce: {
      wpautop: true,
      plugins : 'charmap colorpicker hr lists paste tabfocus textcolor fullscreen wordpress wpautoresize wpeditimage wpemoji wpgallery wplink wptextpattern',
      toolbar1: 'formatselect,bold,italic,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,wp_more,spellchecker,fullscreen,wp_adv,listbuttons',
      toolbar2: 'styleselect,strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help',
      textarea_rows : 20
    },
    quicktags: {buttons: 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close'},
    mediaButtons: false,
});

Muhammad Junaid · Accepted Answer · 2020年10月19日 10:52

1

Muhammad Junaid answered at 2020年10月19日 10:52

You should try wp.oldEditor.initialize() instead of wp.editor.initialize() , Make sure to enqueue the editor first

Antonio Novak · Accepted Answer · 2017年9月20日 06:26

You can use only wp_enqueue_editor(); instead of:

if ( ! class_exists( '_WP_Editors', false ) ) {
    require( ABSPATH . WPINC . '/class-wp-editor.php' );
}
add_action( 'admin_print_footer_scripts', array( '_WP_Editors', 'print_default_editor_scripts' ) );

Jarocks · Accepted Answer · 2017年9月14日 01:12

I had similar issues with wp.editor.initialize, after a bit of troubleshooting, I found that some of the needed scripts weren't being fully loaded.

Adding this snippet of code into my plugin fixed the issue:

if ( ! class_exists( '_WP_Editors', false ) ) {
    require( ABSPATH . WPINC . '/class-wp-editor.php' );
}
add_action( 'admin_print_footer_scripts', array( '_WP_Editors', 'print_default_editor_scripts' ) );

wp.editor.initialize not working as expected

About