integration of mce plugin and views

admin/assets/js/tinymce/aiview/plugin.js

@@ -0,0 +1,110 @@
+/* global tinymce */
+tinymce.PluginManager.add('aiview', function( editor ) {
+
+	function replaceAesopShortcodes( content ) {
+		return content.replace( /\[aesop_content([^\[\]]*)]([^\[\]]+)\[\/aesop_content]/g, function( match ) {
+			return html( 'aesop-content', match );
+		});
+	}
+
+	function html( cls, data ) {
+		data = window.encodeURIComponent( data );
+		return ':placeholder:';
+		//return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
+		//	'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
+	}
+
+	function restoreAesopShortcodes( content ) {
+		function getAttr( str, name ) {
+			name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );
+			return name ? window.decodeURIComponent( name[1] ) : '';
+		}
+
+		return content.replace( /(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g, function( match, image ) {
+			var data = getAttr( image, 'data-wp-media' );
+
+			if ( data ) {
+				return '<p>' + data + '</p>';
+			}
+
+			return match;
+		});
+	}
+
+	function editComponent( node ) {
+		var content, frame, data;
+
+/*		if ( node.nodeName !== 'IMG' ) {
+			return;
+		}
+
+		// Check if the `wp.media` API exists.
+		if ( typeof wp === 'undefined' || ! wp.media ) {
+			return;
+		}
+
+		data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
+
+		// Make sure we've selected a gallery node.
+		if ( editor.dom.hasClass( node, 'wp-gallery' ) && wp.media.gallery ) {
+			gallery = wp.media.gallery;
+			frame = gallery.edit( data );
+
+			frame.state('gallery-edit').on( 'update', function( selection ) {
+				var shortcode = gallery.shortcode( selection ).string();
+				editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
+				frame.detach();
+			});
+		}*/
+	}
+
+	editor.addCommand( 'Aesop', function() {
+		editMedia( editor.selection.getNode() );
+	});
+
+	editor.on( 'mouseup', function( event ) {
+		var dom = editor.dom,
+			node = event.target;
+
+		function unselect() {
+			dom.removeClass( dom.select( 'div.aesop-selected' ), 'aesop-selected' );
+		}
+
+	// Have to replace this handler to recognize all of the different components
+/*		if ( node.nodeName === 'DIV' && dom.getAttrib( node, 'data-wp-media' ) ) {
+			// Don't trigger on right-click
+			if ( event.button !== 2 ) {
+				if ( dom.hasClass( node, 'wp-media-selected' ) ) {
+					editMedia( node );
+				} else {
+					unselect();
+					dom.addClass( node, 'wp-media-selected' );
+				}
+			}
+		} else {
+			unselect();
+		}*/
+	});
+
+	// Display gallery, audio or video instead of img in the element path
+	editor.on( 'ResolveName', function( event ) {
+		var dom = editor.dom,
+			node = event.target;
+
+		/*if ( node.nodeName === 'DIV' && dom.getAttrib( node, 'data-wp-media' ) ) {
+			if ( dom.hasClass( node, 'wp-gallery' ) ) {
+				event.name = 'gallery';
+			}
+		}*/
+	});
+
+	editor.on( 'BeforeSetContent', function( event ) {
+		event.content = replaceAesopShortcodes( event.content );
+	});
+
+	editor.on( 'PostProcess', function( event ) {
+		if ( event.get ) {
+			event.content = restoreAesopShortcodes( event.content );
+		}
+	});
+});

admin/class-aesop-core-admin.php

@@ -65,8 +65,9 @@ private function __construct() {
 		*/
 		add_action( 'media_buttons', array($this,'generator_button' ),100);
 		add_action( 'admin_footer', array($this,'generator_popup' ));
-		add_action('admin_enqueue_scripts', array($this,'admin_scripts'));
+		add_action( 'admin_enqueue_scripts', array($this,'admin_scripts'));
 		add_filter( 'wp_fullscreen_buttons', array($this,'fs_generator_button' ));
+		add_filter( 'mce_external_plugins', array($this, 'tinymce_plugin'));
 	}
 
 	/**
@@ -153,6 +154,22 @@ public function fs_generator_button($buttons){
 		$buttons[] = self::generator_button();
 		return $buttons;
 	}
+
+	/**
+	 	* Add the tinymce plugin recognize specific shortcodes
+	 	*
+	 	* @since     1.1.0
+	*/
+	public function tinymce_plugin(){
+		$plugins = array('aiview');
+		$plugins_array = array();
+
+		foreach ($plugins as $plugin) {
+			$plugins_array[ $plugin ] = plugins_url('assets/js/tinymce/', __FILE__) . $plugin . '/plugin.js';
+		}
+		return $plugins_array;
+	}
+
 	/**
 	 	* Draw the component generator
 	 	*