WordPress custom shortcode editor [BackboneJS & TinyMCE)

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.

Read More

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>

    <# } #>
</script>

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

Related posts

Leave a Reply

1 comment