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 :


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 {
            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 = {
                content: content,
                title: attrs.title

            return this.template( options );


wp.mce.views.register( 'toggles', wp.mce.toggles );

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>
<# if ( data.title ) { #>

        <h2>{{ data.title }}</h2>
        <p data-wpview-pad="1">{{ data.content }}</p>

<# } #>

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.