Patch for Image parsing and dialog preview

[ycombarnous]

I implemented a rough parsing of images (makeImage function in FCKeditorParser.body.php). Here is the code:

   function makeImage( $nt, $options ) {
        $imageAtts = $url = $alt = $class = '';
	$fkc_mw_image_options = explode( '|', $options) ;
	$sk = $this->mOptions->getSkin();
	
	$time = false;
	# Get parameter map
	$file = wfFindFile( $nt, $time );
	$originalLink = $sk->makeImageLink2( $nt, $file);
	
	if (false == strpos($originalLink, "src=\"")) {
		$url = "";
		$class .= ' fck_mw_notfound';
	}
	else {
	    $srcPart = substr($originalLink, strpos($originalLink, "src=")+ 5);
	    $url = strtok($srcPart, '"');
	}
	
	foreach( $fkc_mw_image_options as $option ) {
		if ($option == 'thumb' || $option == 'frame' || $option == 'border') {
			$imageAtts .= ' _fck_mw_type="' . $option . '"';
			if ($option == 'thumb' || $option == 'frame') {
				$class .= ' fck_mw_frame';
			}
		} elseif ($option == 'right' || $option == 'left' || $option == 'center') {
			$imageAtts .= ' _fck_mw_location="' . $option . '"';
			$class .= ' fck_mw_' . $option;
		} elseif ( substr( $option, strlen( $option ) - 2 ) == 'px') {
			if (preg_match('/(\d+)x(\d+)/',$option)) {
				$imageAtts .= ' _fck_mw_width="' . substr($option,0,strpos($option,'x')) . '"';
				$imageAtts .= ' _fck_mw_height="' . substr($option,strpos($option,'x')+1, strlen($option)-(strpos($option,'x')+3)) . '"';
			} else {
			$imageAtts .= ' _fck_mw_width="' . substr($option,0,strlen( $option ) - 2) . '"';
			}
		} else {
			$alt .= ' ' . $option;
		}
	}
	
	if (!preg_match('/_fck_mw_location/',$imageAtts)) {
		$class .= ' fck_mw_right';
	}
	
	$imageTags = '<img src="' . $url . '" _fck_mw_filename="' . substr($nt,6) . '" class="'. trim($class) .'" alt="' . trim($alt) . '" ' . $imageAtts .'>';

	return $imageTags;
    }

In addition, I implemented an image preview in the dialog:

function UpdatePreviewFromAjax( response )
{
	var eImgPreview = window.document.getElementById('prevImg');
	eImgPreview.src = response.responseText ;
	SetAttribute(eImgPreview, "width" , '180px' ) ;
	SetAttribute(eImgPreview, "height", '130px' ) ;
	//UpdateImage( eImgPreview, response.responseText ) ;
}

function UpdatePreview()
{
	var ajaxArg = GetE('txtUrl').value + '|180x130px';
	oEditor.window.parent.sajax_request_type = 'GET' ;
	oEditor.window.parent.sajax_do_call( 'wfSajaxGetImageUrl', [ajaxArg], UpdatePreviewFromAjax ) ;
}

You will have to add "UpdatePreview();" to LoadSelection, and modify the first part of table like this:

			<tr valign="center">
				<td>
					<span>Image file name</span><br />
					<input id="txtUrl" style="width: 100%" type="text" onkeyup="OnUrlChange();" />
					<br />
					Automatic search results (<span id="xWikiSearchStatus">start typing in the above field</span>)<br />
					<select id="xWikiResults" size="5" style="width: 100%; height: 70px" onclick="SetUrl( this.value );UpdatePreview();">
					</select>
				</td>
				<td width="180px" height="130px"><div style="width:180; height:130; border:solid 1px black;" valign="center" align="center">
					<img id="prevImg" width="180px" height="130px" alt="Preview"></div>
				</td>
			</tr>

[Stephen R]

The first part works to fix the "breaking images" problem of MW 1.11.0 (see Ticket #1293). Thanks!

[Stephen R]

I'd like to implement your preview code too... where exactly do you add those two additional boxes of code? I didn't see a "LoadSelection()" function in any of the primary PHP files. Is that referring to something other than a function?

[ycombarnous]

Save http://dev.fckeditor.net/attachment/ticket/1293/image.html and overwrite the image.html file in wiki_directory\extensions\FCKeditor\plugins\mediawiki\dialogs folder

[clarkt2]

In the FCKeditorParser.body.php makeImage function from above, the following code seems to be causing problems in editing Wikitext containing images without left, center, or right attributes.

	if (!preg_match('/_fck_mw_location/',$imageAtts)) {
		$class .= ' fck_mw_right';
	}

This code seems to force an image to the right if the alignment was not specified. I am very new to the MediaWiki+FCKeditor extension and do not understand all of the nuances of the editor, but commenting these lines out seems to make the editor behave like I expect on MediaWiki 1.11.0. The only side effect that I have observed from commenting out these lines is an empty class assignment when $imageTags is set.

Is commenting out these lines dangerous?

[wwalc]

Thanks ycombarnous for providing those great two patches!

Image previewing has been aplied in [947], I used the attached image.html file.

I thought it would be better to keep functions creating image links in FCKeditorSkin.body.php since nobody complained on it in 1.10. Mediawiki 1.11 introduced new function: makeImageLink2, probably I would have to look for it a long time, but with your patch it was obvious that this function was making problems.

I overwrote it, but haven't tested it well - please let me know guys if have any problems with it.

[Stephen R]

Is this included in the SVN yet?

[Stephen R]

Just checked -- both of these patches work great for me! And both are included in the last SVN...! Ticket can probably be closed if there are no other issues...

[changoboy]

Replying to Stephen R:

Just checked -- both of these patches work great for me! And both are included in the last SVN...! Ticket can probably be closed if there are no other issues...

Hi My name is Marco and I'm trying to implement this on my server and it doesn't work, I'm not sure what am I doing wrong, I'm getting "[[Image:|Image:" I was sucessful in eliminating the second "Image:" (modifing a bit your code) but then my link will turn into [[Image:|xxx.jpg]], I roll back to your example. Can you help me? what should I post.

[wwalc]

This has been fixed with [948], changoboy please download the latest version.