Wordpress niestandardowy edytor shortcode [BackboneJS & TinyMCE)

Question

Używam Wordpress 3.9.1 i napisałem niestandardowy shortcode, który działa, ale chciałbym trochę go dostosować Kiedy używam mojego shortcode, to jest to render na stronie administratora: [przełącza title = "zaez"] aezaezae [/ toggles]

Mogę edytować, dodawać tekst lub link do tekstu "aezaezae". Chciałbym zachować to zachowanie, ale lepiej wyglądać.

Więc użyłem kodu z WordPress (galeria Kod) i zrobił:

(function($){ 

var views = {}, 
    instances = {}, 
    media = wp.media, 
    viewOptions = ['encodedText']; 

// Create the `wp.mce` object if necessary. 
wp.mce = wp.mce || {}; 

wp.mce.toggles = { 
    shortcode: 'toggles', 
    toView: function(content) { 
     var match = wp.shortcode.next(this.shortcode, content); 

     if (! match) { 
      return; 
     } 

     return { 
      index: match.index, 
      content: match.content, 
      options: { 
       shortcode: match.shortcode 
      } 
     }; 
    }, 
    View: wp.mce.View.extend({ 
     className: 'editor-toggles', 
     template: media.template('editor-toggles'), 

     // The fallback post ID to use as a parent for galleries that don't 
     // specify the `ids` or `include` parameters. 
     // 
     // Uses the hidden input on the edit posts page by default. 
     postID: $('#post_ID').val(), 

     initialize: function(options) { 
      this.shortcode = options.shortcode; 
     }, 

     getHtml: function() { 
      var attrs = this.shortcode.attrs.named, 
       content = this.shortcode.content, 
       options; 

      options = { 
       content: content, 
       title: attrs.title 
      }; 

      return this.template(options); 

     } 
    }) 

}; 
wp.mce.views.register('toggles', wp.mce.toggles); 

} (jQuery));

I to jest szablon, który jest nazywany

<script type="text/html" id="tmpl-editor-toggles"> 
    <div class="toolbar"> 
     <div class="dashicons dashicons-edit edit"></div><div class="dashicons dashicons-no-alt remove"></div> 
    </div> 
    <# if (data.title) { #> 

      <h2>{{ data.title }}</h2> 
      <hr> 
      <p data-wpview-pad="1">{{ data.content }}</p> 
      <hr> 

    <# } #> 
</script> 

To działa też, ale w tej chwili nie mogę edytować zawartość już. Zajrzałem do funkcji galerii, ale nazwała inne okno (wp.media.gallery) i chciałbym móc edytować w tym domyślnym edytorze ...

Czy ktoś może mi powiedzieć, czy to możliwe, a może podpowiedz mi ? znalazłem to, ale jak powiedziałem, że to dla multimedialnych (obrazy ... wideo) Custom wp.media with arguments support

Jeśli mam zadzwonić nowe okno aby edytować shortcode Zrobię to, ale ja naprawdę nie wiem jak ..

Dzięki! poważaniem Thomas

Answer 1

Jest wielki artykuł na temat tworzenia skróconych tutaj: http://www.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

Przewiń w dół do sekcji zatytułowanej „Button Krótki kod TinyMCE Editor”, a zobaczysz przykład tego, co myślę, że starasz do zrobienia.

Kiedy przycisk shortcode, pojawi się okno dialogowe, które skłania nas wpisać parametr shortcode