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的编辑器按钮”一节中，你会看到的一个例子是我想你想去做。

当我们按下按钮，短代码，会出现一个对话框，提示我们 键入简码参数