WordPress ~ Add shortcode button with title, list and image contents - #frontend #shortcode

shortcode.js

/*!
 * SHORTCODE
 *
 * Plugin Name: Shortcode
 * Version: 1.0.0
 * Description: Add shortcode button with title, list and image contents.
 *
 * Author: Achraf Chouk
 * Author URI: https://github.com/crewstyle
 * License: The MIT License (MIT)
 *
 * The MIT License (MIT)
 *
 * Copyright (C) Achraf Chouk - achrafchouk@gmail.com
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 */

(function ($){
    tinymce.PluginManager.add('shortcode', function (editor,url){
        'use strict';

        editor.addButton('shortcode', {
            text: '',
            tooltip: 'Shortcode',
            icon: 'dashicon dashicons-format-gallery',

            onclick: function (){
                editor.windowManager.open({
                    title: 'Box',
                    body: [
                        {
                            type: 'textbox',
                            name: 'sc_title',
                            multiline: false,
                            label: 'Titre',
                        },
                        {
                            type: 'listbox',
                            name: 'sc_option',
                            label: 'Option',
                            values: [
                                {
                                    text: 'Option 1',
                                    value: 'option_1',
                                },
                                {
                                    text: 'Option 2',
                                    value: 'option_2',
                                },
                                {
                                    text: 'Option 3',
                                    value: 'option_3',
                                },
                            ],
                            value: 'option_1',
                        },
                        {
                            type: 'textbox',
                            name: 'sc_image',
                            multiline: false,
                            label: 'Image',
                            classes: 'sc_image',
                        },
                        {
                            type: 'button',
                            name: 'media_image',
                            label: '',
                            text: 'Ajouter une image',
                            classes: 'media_image',
                        }
                    ],
                    onsubmit: function (e){
                        editor.insertContent('[shortcode title="'+e.data.sc_title+'" option="'+e.data.sc_option+'" image="'+e.data.sc_image+'"]'+e.data.sc_content+'[/shortcode]');
                    }
                });
            }
        });
    });
})(jQuery);

jQuery(document).ready(function($){
    $(document).on('click', '.mce-media_image', upload_image_tinymce);

    function upload_image_tinymce (e){
        e.preventDefault();

        var $self = $('.mce-sc_image');
        var $upld = wp.media.frames.file_frame = wp.media({
            title: 'Ajouter une image',
            multiple: false,
            button: {
                text: 'Ajouter une image',
            },
        });

        $upld.on('select', function (){
            var attachment = $upld.state().get('selection').first().toJSON();
            $self.val(attachment.url);
        });

        $upld.open();
    }
});