Question

我正在使用Wordpress 3.9.1并且我编写了一个有效的自定义短代码，但我想稍微定制一下当我使用我的短代码时，这是管理页面中的渲染： [toggles title =“zaez”] aezaezae [/ toggles]

我可以编辑，添加文字或链接到文本“aezaezae”。而且我想保持这种行为，但要让它更好看。

所以我使用了wordpress（gallery的代码）中的一些代码并且做到了：

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

向下滚动到标题为＆＃34; Shortcode TinyMCE Editor Button＆＃34;而且你会看到我认为你想要做的事情的一个例子。

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

Wordpress自定义短代码编辑器[BackboneJS＆amp; TinyMCE的）

1 个答案: