TinyMce fixes and support for raw html or bbcodes. (depending on Html posting preference)

2025-08-01 20:30:39 +02:00 · 2013-02-28 03:38:50 -08:00
parent e71b0144a9
commit 0d963eaff5
8 changed files with 294 additions and 95 deletions
--- a/e107_admin/image.php
+++ b/e107_admin/image.php
@@ -1091,10 +1091,15 @@ class media_admin_ui extends e_admin_ui
 			</div>";
 			
 			// TODO to eventually be hidden. 
-			$text .= "bbcode: <input title='bbcode' type='text' readonly='readonly' style='border:0px; width:700px' id='bbcode_holder' name='bbcode_holder' value='' />
-			<input title='html' type='hidden' style='width:800px' id='html_holder' name='html_holder' value='' />
-			<input title='src' type='hidden' style='width:600px' id='src' name='src' value='' />
-			<input title='path' type='hidden' style='width:600px' id='path' name='path' value='' />				
+			
+			$type = (E107_DEBUG_LEVEL > 0) ?  "text" : "hidden";
+			$br = (E107_DEBUG_LEVEL > 0) ?  "<br />" : "";   
+			
+			$text .= "
+			".$br."<input title='bbcode' type='{$type}' readonly='readonly' class='span11' id='bbcode_holder' name='bbcode_holder' value='' />
+			".$br."<input title='html' type='{$type}' class='span11' readonly='readonly' id='html_holder' name='html_holder' value='' />
+			".$br."<input title='src' type='{$type}' class='span11' readonly='readonly' id='src' name='src' value='' />
+			".$br."<input title='path' type='{$type}' class='span11' readonly='readonly' id='path' name='path' value='' />				
 			";		
 						
 		}
--- a/e107_core/bbcodes/bb_img.php
+++ b/e107_core/bbcodes/bb_img.php
@@ -3,7 +3,7 @@

 // General purpose image bbcode. As well as the obvious insertion of a picture:
 // 	a) if filname begins with 'th_' or 'thumb_', creates link to main image opening in new window
-//	b) If filename contains '*', treats it as a wildcard, and displays a random image from all matching file names found
+//	b) If filename contains '*', treats it as a wildcard, and displays a random image from all matching file names found ? really?
 //
 // Can use simple classes for float - e.g.:
 // .floatleft {clear: right; float: left; margin: 0px 5px 5px 0px; padding:2px; border: 0px;}
@@ -30,18 +30,90 @@ class bb_img extends e_bb_base
 		return '[img]'.$code_text.'[/img]';
 	}
 	
+    /**
+     * Media Manager bbcode. eg. using {e_MEDIA_IMAGE} and auto-resizing. 
+     * @return <img> tag with resized image. 
+     */
+    private function mediaImage($code_text,$parm)
+    {
+        $tp = e107::getParser();
+          
+        $code_text  = str_replace('{e_MEDIA_IMAGE}', e_HTTP."thumb.php?src={e_MEDIA_IMAGE}", $code_text);
+        $imgParms    = $this->processParm($code_text, $parm);
+        
+        foreach($imgParms as $k => $v)
+        {
+           // $parmStr .= " ".$k.'="'.$v.'"';
+            $p[] = $tp->toAttribute($k).'="'.$tp->toAttribute($v).'"';
+        } 
+        
+       
+        $w = e107::getBB()->resizeWidth(); // varies depending on the class set by external script. see admin->media-manager->prefs
+        
+        
+        $w = vartrue($imgParms['width']) ? intval($imgParms['width']) : vartrue(e107::getBB()->resizeWidth(),300);
+     //   $h = vartrue($imgParms['height']) ? intval($imgParms['height']) : e107::getBB()->resizeHeight();
+        
+        $resize = "&w=".$w; // Always resize - otherwise the thumbnailer returns nothing. 
+        $parmStr = implode(" ",$p);
+    
+   //     print_a($imgParms);
+   //     print_a($parmStr);
+        
+        return "<img src=\"".$code_text.$resize."\" {$parmStr} />";
+    }
+
+    /**
+     * Process the [img] bbcode parm. ie. [img parms]something[/img]
+     */
+    private function processParm($code_text, $parm)
+    {      
+        $tp = e107::getParser(); 
+        
+        $imgParms               = array();
+        $parmStr                = "";
+     
+        $parm = preg_replace('#onerror *=#i','',$parm);
+        $parm = str_replace("amp;", "&", $parm);
+        
+     //   $parm = str_replace(" ","&",$parm); // Needed as parse_str() doesn't know how to handle spaces. Could return [width] => '400 AltValue'
+        
+        parse_str($parm,$imgParms);
+        
+        foreach($tmp as $p => $v)
+        {
+         //   $imgParms[$p]=$v;
+        }
+        
+        if(!vartrue($imgParms['alt'])) // Generate an Alt value from filename if one not found.  
+        {
+           preg_match("/([\w]*)(?:\.png|\.jpg|\.jpeg|\.gif)/i", $code_text, $match); // Generate required Alt attribute. 
+           $imgParms['alt']        = ucwords(str_replace("_"," ",$match[1])); 
+        }
+        
+        $imgParms['class']      = "bbcode ".e107::getBB()->getClass('img');;  //  This will be overridden if a new class is specified        
+        
+        return $imgParms;       
+    }  
+    
 	
 	function toHTML($code_text, $parm)
-	{
+    {
+       
 		$tp = e107::getParser();
-		$pref = e107::getPref();
+        $pref = e107::getPref();

-		$class = e107::getBB()->getClass('img');
+        if (trim($code_text) == "") return "";                      // Do nothing on empty file
+        
+        if(substr($code_text,0,15) == '{e_MEDIA_IMAGE}') // Image from Media-Manager. 
+        {  
+            return $this->mediaImage($code_text, $parm);          
+        }
        
        
    
-		if (trim($code_text) == "") return ""; 						// Do nothing on empty file
-		if (preg_match("#\.php\?.*#",$code_text)){return "";}
+        
+		if (preg_match("#\.php\?.*#",$code_text)){return "";} //XXX Breaks MediaManager Images, so do it after mediaManager check. 
 		
 		$addlink = FALSE;

@@ -57,37 +129,18 @@ class bb_img extends e_bb_base
 		}
 		// ------------------------
 		
-		
-		
-		
 		$search = array('"', '{E_IMAGE}', '{E_FILE}', '{e_IMAGE}', '{e_FILE}');
 		$replace = array('&#039;', e_IMAGE_ABS, e_FILE_ABS, e_IMAGE_ABS, e_FILE_ABS);
 		$replaceInt = array('&#039;', e_IMAGE, e_FILE, e_IMAGE, e_FILE);
 		$intName = str_replace($search, $replaceInt, $code_text);			// Server-relative file names
-		unset($imgParms);
-		$imgParms['class']="bbcode {$class}";  //  This will be overridden if a new class is specified
 		
-		$imgParms['alt']='';
 	
 		$code_text = str_replace($search, $replace, $code_text);
 		$code_text = $tp -> toAttribute($code_text);
+        
 		$img_file = pathinfo($code_text);		// 'External' file name. N.B. - might still contain a constant such as e_IMAGE
 		
-		if($parm)
-		{
-			$parm = preg_replace('#onerror *=#i','',$parm);
-			$parm = str_replace("amp;", "&", $parm);
-			parse_str($parm,$tmp);
-			foreach($tmp as $p => $v)
-			{
-				$imgParms[$p]=$v;
-			}
-		}
-		$parmStr="";
-		foreach($imgParms as $k => $v)
-		{
-		  $parmStr .= $tp -> toAttribute($k)."='".$tp -> toAttribute($v)."' ";
-		}
+        $parmStr = $this->processParm($code_text, $parm);
 		

 		
--- a/e107_handlers/bbcode_handler.php
+++ b/e107_handlers/bbcode_handler.php
@@ -538,25 +538,104 @@ class e_bbcode
  		return "<div id='bbcode-panel-".$id."' class='mceToolbar bbcode-panel' {$visible}>".$tp->parseTemplate($BBCODE_TEMPLATE,TRUE)."</div>";		
 	}
 	
+    
+
+   function processTag($tag, $html)
+    {
+        $html = "<html><body>".$html."</body></html>";
+        $doc = new DOMDocument();     
+        $doc->loadHTML($html);
+
+        $tmp = $doc->getElementsByTagName($tag);
+        
+        $var = array();
+
+        $attributes = array('class','style','width','height','src','alt','href');
+        
+        $params = array(
+            'img'   =>  array('style','width','height','alt')
+        );
+        
+        // Generate array for $var ($code_text) & $params ($parm);
+        foreach ($tmp as $tg)
+        {
+            $var = array();
+            $parm = array();
+            
+            foreach($attributes as $att)
+            {
+                $v = (string) $tg->getAttribute($att);  
+                         
+                if(trim($v) != '')
+                {
+                   $var[$att] = $v;
+                   if(in_array($att, $params[$tag]))
+                    {
+                        $parm[$att] = $att."=".str_replace(" ","",$var[$att]); 
+                    }
+                }                                
+            }
+     
+            $inc = ($parm) ? "  ".implode("&",$parm) : "";  // the parm - eg. [img $parm]whatever[/img]
+     
+            switch ($tag) 
+            {
+                case 'img':
+                    
+                    $e_http = str_replace("/",'\/',e_HTTP);
+                    $regex      = "/".$e_http."thumb.php\?src=[^>]*({e_MEDIA_IMAGE}[^&]*)(.*)/i";
+                //    echo "REGEX = ".$regex;
+                    $code_text = preg_replace($regex,"$1",$var['src']);
+                    $code_reg   = str_replace("/","\/",$code_text);
+     
+                    
+                    $search     = '/<img([^>]*)'.$code_reg.'([^>]*)>/i'; // Must match the specific line - not just the tag. 
+                    $replace    = "[img{$inc}]".$code_text."[/img]"; // bbcode replacement.  
+                break;
+                
+                default:
+                     echo "TAG = ".$tag;
+                break;
+            }
+           
+           $html = preg_replace($search,$replace,$html);  
+        }
+  
+        return str_replace(array("<html><body>","</body></html>"),"",$html); 
+    }
+        
+    
+    
 	/**
 	 * Convert HTML to bbcode. 
 	 */
 	function htmltoBBcode($text)
 	{
+	    
+       
 		$text = str_replace("<!-- bbcode-html-start -->","[html]",$text);
 		$text = str_replace("<!-- bbcode-html-end -->","[/html]",$text);
 	//	$text = str_replace('<!-- pagebreak -->',"[newpage=]",$text);
    
        
+
 		if(substr($text,0,6)=='[html]')
 		{
 			return $text;
 		}
        
+       
+       
+        $text = $this->processTag('img', $text);
+        
+       
+       
 		// Youtube conversion (TinyMce)
 		
 	//	return $text;
 	
+	//   $text = preg_replace('/<img(?:\s*)?(?:class="([^"]*)")?(?:\s*)?(?:style="([^"]*)")?\s?(?:src="thumb.php\?src=([^"]*)&w=([\d]*)?&h=([\d]*)?")(?:\s*)?(?:\s*)?(?:width="([\d]*)")?\s*(?:height="([\d]*)")?(?:\s*)?(?:alt="([^"]*)")? \/>/i',"[img style=width:$4px;height:$5px; alt=$8]$3[/img]",$text ); 
+	
 		$text = preg_replace('/<img class="youtube-([\w]*)" style="([^"]*)" src="([^"]*)" alt="([^"]*)" \/>/i',"[youtube=$1]$4[/youtube]",$text);	
 		$text = preg_replace('/<!-- Start YouTube-([\w,]*)-([\w]*) -->([^!]*)<!-- End YouTube -->/i','[youtube=$1]$2[/youtube]',$text);	
 					
@@ -565,8 +644,8 @@ class e_bbcode
 		$text = preg_replace("/<a.*?href=\"(.*?)\".*?>(.*?)<\/a>/i","[link=$1]$2[/link]",$text);
 		$text = preg_replace('/<div style="text-align: ([\w]*);">([\s\S]*)<\/div>/i',"[$1]$2[/$1]",$text); // verified
 		$text = preg_replace('/<div class="bbcode-(?:[\w]*).* style="text-align: ([\w]*);">([\s\S]*)<\/div>/i',"[$1]$2[/$1]",$text); // left / right / center
-		$text = preg_replace('/<img(?:\s*)?(?:style="([^"]*)")?\s?(?:src="([^"]*)")(?:\s*)?(?:alt="(\S*)")?(?:\s*)?(?:width="([\d]*)")?\s*(?:height="([\d]*)")?(?:\s*)?\/>/i',"[img style=width:$4px;height:$5px;$1]$2[/img]",$text );
-		$text = preg_replace('/<img class="(?:[^"]*)"(?:\s*)?(?:style="([^"]*)")?\s?(?:src="([^"]*)")(?:\s*)?(?:alt="(\S*)")?(?:\s*)?(?:width="([\d]*)")?\s*(?:height="([\d]*)")?(?:\s*)?\/>/i',"[img style=width:$4px;height:$5px;$1]$2[/img]",$text );
+	//	$text = preg_replace('/<img(?:\s*)?(?:style="([^"]*)")?\s?(?:src="([^"]*)")(?:\s*)?(?:alt="(\S*)")?(?:\s*)?(?:width="([\d]*)")?\s*(?:height="([\d]*)")?(?:\s*)?\/>/i',"[img style=width:$4px;height:$5px;$1]$2[/img]",$text );
+	//	$text = preg_replace('/<img class="(?:[^"]*)"(?:\s*)?(?:style="([^"]*)")?\s?(?:src="([^"]*)")(?:\s*)?(?:alt="(\S*)")?(?:\s*)?(?:width="([\d]*)")?\s*(?:height="([\d]*)")?(?:\s*)?\/>/i',"[img style=width:$4px;height:$5px;$1]$2[/img]",$text );
 	//	$text = preg_replace('/<span (?:class="bbcode-color" )?style=\"color: ?(.*?);\">(.*?)<\/span>/i',"[color=$1]$2[/color]",$text);
 		$text = preg_replace('/<span (?:class="bbcode underline bbcode-u)(?:[^>]*)>(.*?)<\/span>/i',"[u]$1[/u]",$text);
 	//	$text = preg_replace('/<table([^"]*)>/i', "[table $1]",$text);
@@ -586,10 +665,9 @@ class e_bbcode
 		$text = preg_replace('/<blockquote([\w :\-_;="]*)?>/i', "[blockquote]",$text);
 		$text = preg_replace('/<p([\w :\-_;="]*)?>/i', "",$text);  // Causes issues : [p] [/p] everywhere. 
 		
-		
-		$ehttp = str_replace("/",'\/',e_HTTP);
-		$text = preg_replace('/thumb.php\?src='.$ehttp.'([^&]*)([^\[]*)/i', "$1",$text);
-		$text = preg_replace('/thumb.php\?src=([^&]*)([^\[]*)/i', "$1",$text);
+	//	$ehttp = str_replace("/",'\/',e_HTTP);
+	//	$text = preg_replace('/thumb.php\?src='.$ehttp.'([^&]*)([^\[]*)/i', "$1",$text);
+	//	$text = preg_replace('/thumb.php\?src=([^&]*)([^\[]*)/i', "$1",$text);
 		
 			
 		// Mostly closing tags. 
@@ -630,7 +708,7 @@ class e_bbcode
 		$paths = array(
 			e107::getFolder('images'),
 			e107::getFolder('plugins'),
-			e107::getFolder('media_images'),
+		//	e107::getFolder('media_images'),
 			e107::getFolder('media_files'),
 			e107::getFolder('media_videos')
 		);
--- a/e107_handlers/e_parse_class.php
+++ b/e107_handlers/e_parse_class.php
@@ -1810,9 +1810,9 @@ class e_parse

 	public function thumbUrl($url, $options = array(), $raw = false, $full = false)
 	{
-		if(substr($url,0,3)=="{e_") // Fix for broken links that use {e_MEDIA} etc. 
+		if(substr($url,0,3)=="{e_") // Fix for broken links that use {e_MEDIA} etc. //XXX This is bad. 
 		{
-			$url = $this->replaceConstants($url,'abs');			
+			//$url = $this->replaceConstants($url,'abs');			
 		}
 				
 		if(!is_array($options))
--- a/e107_handlers/media_class.php
+++ b/e107_handlers/media_class.php
@@ -568,23 +568,31 @@ class e_media
 		$w	= false;
 		$h = false;
 			
-		if($bbcode)
+		if($bbcode) // ie. TinyMce Editor, not imagepicker(); 
 		{
 			e107::getBB()->setClass($category);
 			$w = e107::getBB()->resizeWidth(); // resize the image according to prefs. 
 			$h = e107::getBB()->resizeHeight();
 			e107::getBB()->clearclass();
+				
+			$w = vartrue($w,300);
+            $h = vartrue($w,200);
 		}
 		
 		
 		
 		$tp = e107::getParser();
-	//	e107::getParser()
+	
+		/*
+            $media_path : Inserted into html tags eg. <img src='here'...
+        */
+
+		
 		
 		foreach($images as $im)
 		{
 			$class 			= ($category !='_icon') ? "media-select-image" : "media-select-icon";
-			$media_path 	= ($w || $h) ? $tp->thumbUrl($im['media_url'], "w={$w}&h={$h}") : $tp->replaceConstants($im['media_url'],'full'); // max-size 
+			$media_path 	= ($w || $h) ? $tp->thumbUrl($im['media_url'], "&w={$w}") : $tp->thumbUrl($im['media_url']); // $tp->replaceConstants($im['media_url'],'full'); // max-size 
 				
 			$realPath 		= $tp->thumbUrl($im['media_url'], $att);
 			$diz 			= $tp->toAttribute($im['media_title'])."\n".$im['media_dimensions'];		
@@ -615,7 +623,7 @@ class e_media
 		 	
 		 	$img_url = ($cat !='_icon') ? e107::getParser()->thumbUrl($im['media_url'], $att) : $media_path;
 			
-			$text .= "<a class='{$class} e-tip' data-id='{$im['media_id']}' data-src='{$media_path}' data-bbcode='{$data_bb}' data-target='{$tagid}' data-path='{$im['media_url']}' data-preview='{$realPath}' title=\"".$diz."\" style='float:left' href='#' onclick=\"{$onclicki}\" >";
+			$text .= "<a class='{$class} e-tip' data-id='{$im['media_id']}' data-width='{$w}' data-height='{$h}' data-src='{$media_path}' data-bbcode='{$data_bb}' data-target='{$tagid}' data-path='{$im['media_url']}' data-preview='{$realPath}' title=\"".$diz."\" style='float:left' href='#' onclick=\"{$onclicki}\" >";
 			$text .= "<img src='".$img_url."' alt=\"".$im['media_title']."\" title=\"{$diz}\" />";
 			$text .= "</a>\n\n";
 		}	
--- a/e107_plugins/tinymce/plugins/e107bbcode/parser.php
+++ b/e107_plugins/tinymce/plugins/e107bbcode/parser.php
@@ -11,19 +11,45 @@
 */
 require_once("../../../../class2.php");

-
+/**
+ * Two Modes supported below going to and from the Tinymce wysiwyg editor.  
+ * 1) When the post_html pref is active - raw html is used in the editor and wrapped in [html] [/html] bbcodes in the background. 
+ * 2) When the post_html pref is disabled - bbcodes are used in the background and converted to html for the editor. 
+ * Tested extensively over 24 hours with Images - check with Cameron first if issues arise. 
+ * TODO Test Lines breaks and out html tags. 
+ * TODO Check with html5 tags active. 
+ */

 if($_POST['mode'] == 'tohtml')
 {
+   
+    
 	// XXX @Cam possible fix - convert to BB first, see news admin AJAX request/response values for reference why
 	$content = stripslashes($_POST['content']);
-//	$content = e107::getBB()->htmltoBBcode($content);	//XXX This breaks inserted images from media-manager. :/
        
-	$content = $tp->toDB($content);
-	e107::getBB()->setClass($_SESSION['media_category']);
-	// XXX @Cam this breaks new lines, currently we use \n instead [br]
-	//echo $tp->toHtml(str_replace("\n","",$content), true);
-	echo $tp->toHtml($content, true);
+//	$content = e107::getBB()->htmltoBBcode($content);	//XXX This breaks inserted images from media-manager. :/
+    e107::getBB()->setClass($_SESSION['media_category']);
+     
+    if(check_class($pref['post_html'])) // raw HTML within [html] tags. 
+    {
+        $content = str_replace("{e_BASE}","",$content); // We want {e_BASE} in the final data going to the DB, but not the editor. 
+   
+        $srch = array("<!-- bbcode-html-start -->","<!-- bbcode-html-end -->","[html]","[/html]");
+        $content = str_replace($srch,"",$content);
+        echo $content;
+    }
+    else  // bbcode Mode. 
+    {   
+        
+        // XXX @Cam this breaks new lines, currently we use \n instead [br]
+        //echo $tp->toHtml(str_replace("\n","",$content), true); 
+        
+        $content = str_replace("{e_BASE}",e_HTTP, $content); // We want {e_BASE} in the final data going to the DB, but not the editor. 
+        $content = $tp->toHtml($content, true);
+        $content = str_replace(e_MEDIA_IMAGE,"{e_MEDIA_IMAGE}",$content);
+        
+        echo $content;
+    }
 	
 	e107::getBB()->clearClass();	
 }
@@ -32,8 +58,30 @@ if($_POST['mode'] == 'tobbcode')
 {
 	// echo $_POST['content'];    
 	$content = stripslashes($_POST['content']);
-//	$content = str_replace("../","",$content); // quick fix for image-path issue. 
-	echo e107::getBB()->htmltoBBcode($content);	
+    
+	if(check_class($pref['post_html'])) // Plain HTML mode. 
+    {
+        $srch = array('src="'.e_HTTP.'thumb.php?');
+        $repl = array('src="{e_BASE}thumb.php?');
+    
+        $content = str_replace($srch, $repl, $content);
+    
+    // resize the thumbnail to match wysiwyg width/height. 
+        $psrch = '/<img src="{e_BASE}thumb.php\?src=([\S]*)w=([\d]*)&amp;h=([\d]*)"(.*)width="([\d]*)" height="([\d]*)"/i';
+        $prepl = '<img src="{e_BASE}thumb.php?src=$1w=$5&amp;h=$6"$4width="$5" height="$6" ';
+    
+         $content = preg_replace($psrch, $prepl, $content);
+        
+        echo ($content) ? "[html]".$content."[/html]" : ""; // Add the tags before saving to DB. 
+    }
+    else  // bbcode Mode. 
+    {
+     //   [img width=400]/e107_2.0/thumb.php?src={e_MEDIA_IMAGE}2012-12/e107org_white_stripe.png&w=400&h=0[/img]
+       // $content = str_replace("{e_BASE}","", $content); // We want {e_BASE} in the final data going to the DB, but not the editor. 
+   
+        echo e107::getBB()->htmltoBBcode($content);     
+    }
+		
 }


--- a/e107_plugins/tinymce/wysiwyg.php
+++ b/e107_plugins/tinymce/wysiwyg.php
@@ -69,6 +69,8 @@ class wysiwyg
 	$text .= "

 	function tinymce_e107Paths(type, source) {
+	       
+	   
 	";

 	$tp = e107::getParser();
@@ -76,7 +78,7 @@ class wysiwyg
 	$paths = array(
 		e107::getFolder('images'),
 		e107::getFolder('plugins'),
-		e107::getFolder('media_images'),
+	//	e107::getFolder('media_images'), //XXX Leave disabled - breaks thumb.php={e_MEDIA_IMAGE} which is required.  
 		e107::getFolder('media_files'),
 		e107::getFolder('media_videos')
 	);
@@ -284,7 +286,7 @@ class wysiwyg
 			'entity_encoding'					=> 'raw',
 			'convert_fonts_to_styles'			=> 'true',
 			'remove_script_host'				=> 'true',
-			'relative_urls'						=> 'true',
+			'relative_urls'						=> 'false', //Media Manager prefers it like this. 
 			'preformatted'						=> 'true',
 			'document_base_url'					=> SITEURL,
 			'theme_advanced_styles'				=> 'border=border;fborder=fborder;tbox=tbox;caption=caption;fcaption=fcaption;forumheader=forumheader;forumheader3=forumheader3',
--- a/e107_web/js/core/mediaManager.js
+++ b/e107_web/js/core/mediaManager.js
@@ -43,13 +43,8 @@ $(document).ready(function()
 	
 	function eMediaAttribute(e)
 	{		
-		var style 		= '';
-		var bb 			= '';
-	
-		var target 		= $(e).attr('data-target');
-	//	var path		= $(e).attr('data-path');
-	//	var preview 	= $(e).attr('data-preview');
-	//	var src			= $(e).attr('data-src');
+		var style 			= '';
+		var bb 				= '';
 			
 		var src 			= $('#src').attr('value'); // working old
 		var path 			= $('#path').attr('value'); // working old
@@ -57,21 +52,13 @@ $(document).ready(function()
 		
 		var width 			= $('#width').val();	
 		var height			= $('#height').val();	
+				
 		var margin_top 		= $('#margin-top').val();				
 		var margin_bottom 	= $('#margin-bottom').val();	
 		var margin_right 	= $('#margin-right').val();	
 		var margin_left 	= $('#margin-left').val();	
 		var _float 			= $('#float').val();	

-		if(width !='')
-		{				
-			style  = style + 'width:' + width + 'px;';	
-		}
-
-		if(height !='')
-		{				
-			style  = style + 'height:' + height + 'px;';	
-		}				
 									
 		if(margin_right !='')
 		{				
@@ -98,6 +85,22 @@ $(document).ready(function()
 			style  = style + 'float:' + _float + ';';	
 		}
 		
+		// Set the Html / Wysiwyg Value.
+		var html = '<img style=\"' + style + '\" src=\"'+ src +'\" alt=\"\" width=\"' + width + '\" height=\"' + height + '\" />'; 
+		$('#html_holder').val(html);  
+		
+		// Only Do width/height styling on bbcodes --
+		if(width !='')
+		{				
+			style  = style + 'width:' + width + 'px;';	
+		}
+
+		if(height !='')
+		{				
+			style  = style + 'height:' + height + 'px;';	
+		}	
+		
+
 		bb = '[img';
 		
 		if(style !='')
@@ -109,13 +112,10 @@ $(document).ready(function()
 		bb = bb + path;
 		bb = bb + '[/img]';
 				
-		$('#bbcode_holder').val(bb);
-		//	document.getElementById('bbcode_holder').value = bb;
+		$('#bbcode_holder').val(bb); // Set the BBcode Value. 
 				
 			//	var html = '<img style=\"' + style + '\" src=\"'+ src +'\" />'; 
-		var html = '<img style=\"' + style + '\" src=\"'+ src +'\" alt=\"\" width=\"' + width + '\" height=\"' + height + '\"/>'; 

-		$('#html_holder').val(html);
 	}
 	
 		
@@ -125,7 +125,6 @@ $(document).ready(function()
 				// $(".e-media-select").click(function () {  
 		$(".e-media-select").live("click", function(){
  	 		
-    		
    		//	console.log(this);

 				var id			= $(this).attr('data-id');
@@ -133,10 +132,13 @@ $(document).ready(function()
 				var path		= $(this).attr('data-path');
 				var preview 	= $(this).attr('data-preview');
 				var src			= $(this).attr('data-src');
-				var bbcode		= $(this).attr('data-bbcode');
+				var bbcode		= $(this).attr('data-bbcode'); // TinyMce/Textarea insert mode
 				var name		= $(this).attr('data-name');
+				var width		= $(this).attr('data-width');
+				var height		= ''; // disable for now - will be updated by bb parser. // $(this).attr('data-height');		
 				
-					//alert(target);			
+				
+			//	alert(width);			
 						
 				$(this).addClass("media-select-active");
 				$(this).closest("img").addClass("active");			
@@ -169,6 +171,9 @@ $(document).ready(function()
 				$('#path').attr('value',path); // working old
 				$('#src').attr('src',src);	// working old
 				
+				$('#width').val(width);	
+				$('#height').val(height);		
+				
 				$('img#' + target + "_prev", window.top.document).attr('src',preview); // set new value
 				$('div#' + target + "_prev", window.top.document).html(preview); // set new value
 				$('span#' + target + "_prev", window.top.document).html(preview); // set new value