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
    
Any luck with this? I want to do the same thing. –  PerS Sep 17 at 6:04
    
No I figured out that it's not possible at the moment whitout changing wordpress's core... But if you find out a way, let me now please ! –  H4mm3R Sep 17 at 9:21
    
WP 4.0 has added support for edit, just have to understand how to override it. Have a look at line 379 in phpcrossref.com/xref/wordpress/wp-includes/js/mce-view.js.html –  PerS 2 days ago

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.