Opened 12 years ago

Closed 12 years ago

#1294 closed Bug (fixed)

Patch for Image parsing and dialog preview

Reported by: barns Owned by:
Priority: Normal Milestone:
Component: Project : MediaWiki+FCKeditor Version: SVN (FCKeditor) - Retired
Keywords: Cc:

Description

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>

Change History (9)

comment:1 Changed 12 years ago by Stephen R

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

comment:2 Changed 12 years ago by 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?

comment:3 Changed 12 years ago by barns

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

comment:4 Changed 12 years ago by Tommy Clark

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?

comment:5 Changed 12 years ago by Wiktor Walc

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.

comment:6 Changed 12 years ago by Stephen R

Is this included in the SVN yet?

comment:7 Changed 12 years ago by 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...

comment:8 in reply to:  7 Changed 12 years ago by Marco

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.

comment:9 Changed 12 years ago by Wiktor Walc

Resolution: fixed
Status: newclosed

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

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy