Visual Render & Editor from WP TinyMCE on Codestar Framework Shortcodes

gistfile1.php

<?php
/*
* Editor Visual Shortcode Extension
* Version: 1.0.0
*/

// if this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
	die;
}

if(!is_admin()){
	// no access without admin
	return;
}

add_action('admin_footer-edit.php', 'cssc_render_editor_template'); // fired on the page with the posts table
add_action('admin_footer-post.php', 'cssc_render_editor_template'); // fired on post edit page
add_action('admin_footer-post-new.php', 'cssc_render_editor_template'); // fired on add new post page
add_action("wp_ajax_cssc_render_shortcode_preview", 'cssc_render_shortcode_preview');

add_action("admin_print_scripts", "cssc_render_register_scripts", 100);

function cssc_render_shortcode_preview(){
	global $post;
	$post = get_post( (int) $_POST['post_id'] );
	ob_start();
	echo do_shortcode( urldecode( $_POST['raw'] ) );
	$out['html'] = ob_get_clean();
	wp_send_json_success( $out );
}

function cssc_render_register_scripts(){
?>
<script type="text/javascript">

jQuery(function($){
var media = wp.media;

// for loop purpose on data object
var calls = 0;
window.calls = calls; // make variable available globally

// for selecting current data object
var shortcode_object = [];
window.shortcode_object = shortcode_object; // make variable available globally

if( typeof wp.mce === 'undefined'){
	return;
}
	<?php
	global $shortcode_tags; // load all of them

	// array of valid shortcodes (comment this if need to apply on all registered shortcodes)
	$shortcode_tags = array(
		'header_section' => 1, // shortcode name
		'special_section' => 1 // another shortcode name
	);

	foreach ($shortcode_tags as $shortcode => $config) {

		// cleanup shortcode name for display into visual
		$clean_shortcode = preg_replace("/[^a-zA-Z]/", " ", $shortcode);
		?>

		wp.mce.views.register( '<?php echo $shortcode; ?>', {
			View: {
				template: media.template( 'live-shortcode-preview' ),

				initialize: function( options ) {
					this.shortcode = options.shortcode;
					this.fetch();
				},

				loadingPlaceholder: function() {
					return '' +
						'<div class="loading-placeholder">' +
							'<div class="dashicons dashicons-update"></div>' +
							'<div class="wpview-loading"><ins></ins></div>' +
						'</div>';
				},

				fetch: function() {
					var self = this;

					options = {};
					options.context = this;
					options.data = {
						action:  'cssc_render_shortcode_preview',
						post_id: $('#post_ID').val(),
						atts: this.shortcode.attrs,
						raw: this.encodedText
					};

					this.html = media.ajax( options );
					this.vsc = this.html.done( function(form) {
						this.html.data = form;
						self.render( true );
						calls++; // auto increment value for each options data
					} );
				},

				getHtml: function() {
					var attrs = this.shortcode.attrs.named,
						attachments = false,
						options;

					// don't render errors while still fetching content
					if ( this.vsc && 'pending' === this.vsc.state() && ! this.html.length ) {
						return '';
					}

					// get coresponding object data for current loop
					shortcode_object[calls] = this.shortcode.attrs.named;

					// uncomment the above line if you want shortcode content to be parsed into editor
					//return this.template( this.html.data );
					return '<div id="'+calls+'" class="visual-shortcode"><span>shortcode: <strong><?php echo $clean_shortcode; ?></strong></span></div>';
				}
			},

			edit: function( node ) {
				var shortcode_name = '<?php echo $shortcode; ?>',
				$selector = $('#cs-shortcode-dialog').find('.cs-dialog-select');

				$(".cs-shortcode").trigger("click");
				$selector.val(shortcode_name).trigger('change');
				$selector.trigger("chosen:updated");

				var number = $(node).find('.visual-shortcode').attr('id'),
				    shortcodedata = shortcode_object[number];

				// select input types
				var is_input         = $('.cs-element').find("input[type='text']"),
				    is_textarea      = $('.cs-element').find("textarea"),
				    is_select        = $('.cs-element').find("select"),
				    is_select_chosen = $('.cs-element').find("select.chosen"),
				    is_color         = $('.cs-element').find("input.cs-color-picker"),
				    is_switcher      = $('.cs-element').find("input[type='checkbox']");

				// reset previous shortcode data
				function reset_Form() {
				  $("#cs-shortcode-dialog").find(':input').each(function() {
				    switch(this.type) {
				        case 'password':
				        case 'text':
				        case 'file':
				        case 'select-one':
				        case 'select-multiple':
				            jQuery(this).val('');
				            break;
				        case 'textarea':
				            jQuery(this).html('');
				            break;				        
				        case 'checkbox':
				        case 'radio':
				            this.checked = false;
				    }
				  });
				}
				$(document).ajaxSuccess( reset_Form );

				// add shortcode data to form
				$.each( shortcodedata, function (index, value) {
					function addValues_toForm() {
						if (is_input) {
							$('input[data-atts="'+index+'"]').val(value);
						}
						if (is_textarea) {
							$('textarea[data-atts="'+index+'"]').html(value);
						}
						if (is_select) {
							$('select[data-atts="'+index+'"] option[value="'+value+'"]').attr("selected","selected");
						}
						if (is_select_chosen) {
							$('select[data-atts="'+index+'"] option[value="'+value+'"]').attr("selected","selected").trigger("chosen:updated");
						}
						if (is_color) {
							$('input[data-atts="'+index+'"]').attr("value",value).trigger("change");
						}
						if (is_switcher) {
							$('input[data-atts="'+index+'"]').prop('checked', true).trigger("change");
						}
					};
					// push shortcode values to dialog window
					$(document).ajaxSuccess( addValues_toForm );
				});
			}

		});

	<?php } ?>
});

</script>
<?php
}

function cssc_render_editor_template(){
?>
<script type="text/html" id="tmpl-live-shortcode-preview">
<# if ( data.html ) { #>
	{{{ data.html }}}
<# } else { #>
	<div class="wpview-error">
		<div class="dashicons dashicons-no"></div><p><?php _e( 'Invalid shortcode or no content found.', 'cs-framework' ); ?></p>
	</div>
<# } #>
</script>

<?php
}