Wordpress自定义短代码编辑器[BackboneJS&TinyMCE]

Question

我正在使用Wordpress 3.9.1并且我编写了一个可以使用的自定义短代码,但是我想稍微调整一下当我使用我的短代码时,这是管理页面中的渲染:[toggles title ="zaez" ] aezaezae [/切换]

我可以编辑,添加文本或链接到文本"aezaezae".我想保持这种行为,但让它看起来更好.

所以我使用了wordpress(gallery的代码)中的一些代码并做到了:

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

}(jQuery的));

这是被调用的模板

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

它也有效,但此时我不能再编辑我的内容了.我查看了库的功能,但它调用了另一个窗口(wp.media.gallery),我希望能够在这个默认编辑器中编辑...

有人能告诉我是否可能并且可能给我一个线索？我找到了这个,但就像我说的那样是媒体(图片......视频) 自定义wp.media支持参数

如果我要调用一个新窗口来编辑我的短代码,我会这样做,但我真的不知道如何...

谢谢 !最好的问候托马斯

Answer 1

这里有一篇关于创建短代码的精彩文章：http://www.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

向下滚动到标题为“Shortcode TinyMCE Editor Button”的部分，您将看到我认为您正在尝试执行的操作的示例。

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