Wordpress自定義短代碼編輯器[BackboneJS＆TinyMCE]

Question

我使用的是Wordpress 3.9.1，我寫了一個自定義短代碼，但我想定製它一點點 當我使用我的短代碼時，這是渲染在管理頁面： [切換標題=「zaez」] aezaezae [/切換]

我可以編輯，添加文本或鏈接到文本「aezaezae」。 而我想保持這種行爲，但使它看起來更好。

所以我使用了一些代碼的wordpress（庫的代碼），這樣做：

(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的））;

這是被稱爲

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

它的工作太多模板，但在這個時候，我不能再編輯我的內容。我看了畫廊的功能，但它調用了另一個窗口（wp.media.gallery），我希望能夠在此默認編輯器中編輯...

有人可以告訴我，如果這是可能的，也許給我個提示 ？ 我發現這個，但就像我說這是媒體（圖片...視頻） Custom wp.media with arguments support

如果我打電話給一個新的窗口編輯我的簡碼我會做，但我真的不知道該怎麼..

謝謝你！ 最好的問候 托馬斯

Answer 1

有在這裏創造的簡一大篇：http://www.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

向下滾動到名爲「簡碼TinyMCE的編輯器按鈕」一節中，你會看到的一個例子是我想你想去做。

當我們按下按鈕，短代碼，會出現一個對話框，提示我們 鍵入簡碼參數