Soporte » Guías – Resolución de problemas » wp_editor en un modalbox con backbone y underscore

  • pablo005

    (@pablo005)


    Hola,

    Estoy trabajando en un plugin que necesita utilizar el editor de texto en el admin en varias ventanas modales. Para este proyecto estoy utilizando backbone y el motor de template de underscore.

    Cuando backbone renderiza las vistas en las que está incluido el editor, el editor no funciona, las tabs no funcionan y los botones del editor no aparecen.

    Un código simplificado de ejemplo sería este:

    class Modal {
    
      public function __construct( ) {
        if ( is_admin() ) {
          add_action( 'admin_footer', [ $this, '_render_template' ] );
          add_action( 'admin_enqueue_scripts', [ $this, '_admin_enqueue' ] );
        }
      }
    
      public function _render_template() {
        echo '<script type="text/template" id="tmpl-modal">';
          wp_editor( 'Text...', 'modal-box-editor' );
        echo '</script>';
      }
    
      public function _admin_enqueue( $hook ) {
        if ( 'post.php' != $hook && 'post-new.php' != $hook ) return;
        wp_enqueue_script( 'modal-box-script', get_template_directory_uri() . '/modal-box-script.js', [ 'jquery', 'backbone', 'underscore' ], null, true );
      }
    }
    
    $Modal = new Modal();

    y el js

    jQuery(document).ready(function($) {
    
      ModalView = Backbone.View.extend({
        tagName : 'div',
        template : _.template( $( '#tmpl-modal' ).html() ),
        $parent : $( 'body' ),
    
        initialize : function() {
          this.render();
        },
        render : function() {
          this.$el.html( this.template() );
          this.$parent.append( this.el );
          return this;
        },
      });
      var ModalBox = new ModalView();
    });

    Necesitaría saber como puedo instanciar el editor desde js o activar el editor cuando la vista haya sido renderizada.
    ¿Alguna idea?

    Muchas gracias. Saludos

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Moderador Jose Conti

    (@jconti)

    Hola,

    ¿No te sale nada en el Debug del navegador? conflictos, no carga algún archivo, etc…

    Moderador Jose Conti

    (@jconti)

    De momento cambia esto

    wp_editor( 'Text...', 'modal-box-editor' );

    por esto

    wp_editor( 'Text...', 'modal_box_editor' );

    los - provocan problemas si se usan en el wp_editor()

    pablo005

    (@pablo005)

    Hola Jose,

    No lanza ningún error javascript, también he cambiado el id como me has dicho y tampoco funciona.

    Yo creo que el problema está en que la función wp_editor imprime y llama a todas las funciones javascript que utilice el editor antes de que backbone renderize el template. Por eso habría que volver a llamar las funciones javascript que utilice el editor en el momento de renderizar la vista. El problema es que no se como.

    He visto esto:

    pablo005

    (@pablo005)

    pablo005

    (@pablo005)

    He encontrado una solución parcial:

    Js:

    jQuery(document).ready(function($) {
      ModalView = Backbone.View.extend({
        tagName : 'div',
        template : _.template( $( '#tmpl-modal' ).html() ),
        $parent : $( 'body' ),
    
        initialize : function() {
          this.render();
        },
    
        render : function() {
          this.$el.html( this.template() );
          this.$parent.append( this.el );
    
          var edId = 'modal_box_editor';
          var init = tinyMCEPreInit.mceInit[edId];
          tinymce.init( init );
    
          return this;
        },
      });
    });

    De esta forma cuando se renderiza la vista se vuelve a iniciar el js de editor. El modo visual funciona correctamente pero en el modo texto no aparecen los botones y no encuentro la solución.

    Saludos!

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • El debate ‘wp_editor en un modalbox con backbone y underscore’ está cerrado a nuevas respuestas.