Despret-5

SHORDCODE TUTORIAL
=============================
javascript website  http://www.wpexplorer.com/wordpress-tinymce-tweaks/

functions.php
======================
function features_shortcode($atts){
extract(shortcode_atts(array(
	'icon' => '',
	'title' => '',
	'text'  => '',
	), $atts));
return '
<div class="feature-wrap">
<i class="fa fa-'.$icon.'"></i>
<h2>'.$title.'</h2>
<h3>'.$text.'</h3>
</div>
';



}
add_shortcode('features','features_shortcode');

//video shortcode

function youtube_shortcode($atts){
extract(shortcode_atts(array(
	'id' => '',
	), $atts));
return '<div class="embed-responsive embed-responsive-16by9">
<iframe width="640" class="embed-responsive-item" height="360" src="//www.youtube.com/embed/'.$id.'" frameborder="0" allowfullscreen></iframe>
</div>
';



}
add_shortcode('youtube','youtube_shortcode');



// Shortcode button 1
function corlate_theme_tinymce_btn() {
	// check user permissions
	if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
		return;
	}
	// check if WYSIWYG is enabled
	if ( 'true' == get_user_option( 'rich_editing' ) ) {
		add_filter( 'mce_external_plugins', 'corlate_theme_tinymce_plugin' );
		add_filter( 'mce_buttons', 'corlate_theme_tinymce_button' );
	}
}
add_action('admin_head', 'corlate_theme_tinymce_btn');

// Declare script for new button
function corlate_theme_tinymce_plugin( $plugin_array ) {
	$plugin_array['corlate_buttons'] = get_template_directory_uri() .'/js/shortcode-buttons.js';
	return $plugin_array;
}

// Register new button in the editor
function corlate_theme_tinymce_button( $buttons ) {
	array_push( $buttons, 'corlate_buttons' );
	return $buttons;
}


shortcode-button.js
=================================
// Shortcode buttons2
(function() {
	tinymce.PluginManager.add('corlate_buttons', function( editor, url ) {
		editor.addButton('corlate_buttons', {
			text: 'Youtube Video',
			icon: false,
			onclick: function() {
								editor.windowManager.open( {
									title: 'Insert Random Shortcode',
									body: [
										{
											type: 'textbox',
											name: 'textboxName',
											label: 'Text Box',
											value: '30'
										},
										{
											type: 'textbox',
											name: 'multilineName',
											label: 'Multiline Text Box',
											value: 'You can say a lot of stuff in here',
											multiline: true,
											minWidth: 300,
											minHeight: 100
										},
										{
											type: 'listbox',
											name: 'listboxName',
											label: 'List Box',
											'values': [
												{text: 'Option 1', value: '1'},
												{text: 'Option 2', value: '2'},
												{text: 'Option 3', value: '3'}
											]
										}
									],
									onsubmit: function( e ) {
										editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
									}
						});

				}

			});



	});
})()