Wordpress自定义简码编辑器[BackboneJS＆TinyMCE）

Question

我使用的是Wordpress 3.9.1，我写了一个自定义的简码可以正常工作，但我想对其进行一点自定义当我使用我的简码时，这是管理页面中的渲染：

[toggles title="zaez"]aezaezae[/toggles]

我可以编辑，添加文本或链接到文本“ 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/

向下滚动到标题为“ Shortcode TinyMCE编辑器按钮”的部分，您将看到我想尝试做的一个示例。

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