Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm using Wordpress 3.9.1 and I wrote a custom shortcode that working, but I'd like to custom it a little bit When I use my shortcode, this is the render in the admin page : [toggles title="zaez"]aezaezae[/toggles]

I can edit, add text or link to the text "aezaezae". And i'd like to keep this behavior but make it more good to look.

So I used some code from wordpress (gallery's code) and did that :

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

And this is the template that is called

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

<# } #>

It's working too, but at this time I cannot edit my content anymore. I looked with the gallery's function, but it called another window (wp.media.gallery), and I'd like to be able to edit in this default editor...

Can someone tell me if it's possible and maybe give me a clue ? I found this but like I said it's for media (images... videos) Custom wp.media with arguments support

If I've to call a new window to edit my shortcode I'll do it but I don't really know how..

Thanks you ! Best regards Thomas

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.