2014-06-06 14 views
5

Sto usando Wordpress 3.9.1 e ho scritto uno shortcode personalizzato che funziona, ma mi piacerebbe personalizzarlo un po ' Quando uso il mio shortcode, questo è il rendering nella pagina di amministrazione: [toggles title = "zaez"] aezaezae [/ toggles]Editor di shortcode personalizzato Wordpress [BackboneJS & TinyMCE)

Posso modificare, aggiungere testo o collegamento al testo "aezaezae". E mi piacerebbe mantenere questo comportamento ma renderlo più bello da guardare.

così ho usato un po 'di codice da WordPress (codice della galleria) e ha fatto che:

(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));

e questo è il modello che si chiama

<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> 

Si sta lavorando troppo, ma in questo momento non posso modificare più i miei contenuti. Ho guardato con la funzione della galleria, ma ha chiamato un'altra finestra (wp.media.gallery), e mi piacerebbe essere in grado di modificare in questo editor predefinito ...

Qualcuno può dirmi se è possibile e forse Dammi un indizio ? Ho trovato questo, ma come ho detto che è per i media (immagini ... video) Custom wp.media with arguments support

Se ho chiamare una nuova finestra per modificare il mio shortcode lo farò, ma io non so davvero come ..

Grazie! migliori saluti Thomas

+0

Come hai finalmente riuscito questo? Qui, stai creando una vista Mce, che non è modificabile (questo è il comportamento previsto). Dovresti fornire strumenti di modifica all'interno della vista (come la sostituzione del testo con un elemento '' e il controllo delle modifiche tramite JavaScript). –

+0

possibile duplicato di [input single-line contenteditable] (http://stackoverflow.com/questions/6831482/contenteditable-single-line-input) –

risposta