Issue with inline attached images after upgrade of PHP and vB

[MarkFL]

Hello all,

On the forum for which I help administrate, we recently upgraded from vB 4.2.1 to 4.2.2 PL2 and from PHP 5.3.x to 5.4.35. Since then, I have noticed that when our users attempt to attach images inline using the "Insert Image" button on our toolbar, and they are using the WYSIWYG editor, the image displays correctly inline (resized to fit within the parent element), but it also displays full size at the bottom of the post in the "Attached Images" box.

For users that use the Standard Editor, this does not occur...the image is displayed inline with no duplicate at the bottom of the post.

Several of our users that use the WYSIWYG editor that I have spoken with have said this used to work correctly, but now images are duplicated. I have long since gone with the Standard Editor, as I prefer to see the codes in the post message body.

Now, when a user is using the WYSIWYG editor and attaches an image inline using the "Insert Image" button, when I view their post using the standard editor, I see a URL wrapped in IMG tags. When I look at the post of someone using the standard editor who has followed the exact same procedure, I see something like:

xxxx

Does anyone know of a fix for this or why this is an issue for us after the upgrade?

[Zachery]

Upgrade to 4.2.3 or live with the bug :)

[RichieBoy67]

Upgrade to 4.2.3 or live with the bug :)

This was one of the bugs addressed with that update? Cool, I was not aware of that. :up:

[Zachery]

Nearly positive.

[MarkFL]

I found a workaround involving the use of javascript that is executed when a post is submitted (either new or edited). I added this code to this function (part of an external js file that is called when the ckeditor is in use):

var el = document.getElementsByClassName('cke_source')[0];
if (!el)
{
var iFrame = document.getElementsByTagName('iframe')[iFrameIndex()];
var iFrameBody;
if (iFrame.contentDocument)
{ // FF
iFrameBody = iFrame.contentDocument.getElementsByTagName('body' )[0];
}
else if (iFrame.contentWindow)
{ // IE
iFrameBody = iFrame.contentWindow.document.getElementsByTagName ('body')[0];
}
var postContent = iFrameBody.innerHTML;
var n = 1, quit = false;
while (!quit)
{
var imgLoc = nth_occurrence(postContent, "<img src=\"http://mathhelpboards.com/attachment", n);
if (imgLoc == -1)
{
imgLoc = nth_occurrence(postContent, "<img alt=\"\" src=\"http://mathhelpboards.com/attachment", n);
}
if (imgLoc > -1)
{
var imgLocEnd = postContent.substr(imgLoc).indexOf(">") + 1;
var imgStr = postContent.substr(imgLoc, imgLocEnd);
if (nth_occurrence(imgStr, "/", 5) > -1)
{
var attachNumberBegin = nth_occurrence(imgStr, "/", 5) + 1;
var attachNumberEnd = imgStr.substr(attachNumberBegin).indexOf("-");
}
else if(imgStr.indexOf("attachment.php?attachmentid=") > -1)
{
var attachNumberBegin = imgStr.indexOf("attachment.php?attachmentid=") + 28;
var attachNumberEnd = imgStr.substr(attachNumberBegin).indexOf("&");
}
var attachNumber = imgStr.substr(attachNumberBegin, attachNumberEnd);
var newImgStr = "" + attachNumber + "";
postContent = postContent.split(imgStr).join(newImgStr);
iFrameBody.innerHTML = postContent;
}
else
{
quit = true;
}
}
}


Replace the URLs in the code above (in red) with your own. You will also need this function (it is part of an external js file I call from the "head_include_bottom" template because I use it in several places):

function nth_occurrence(string, char, nth)
{
var first_index = string.indexOf(char);
var length_up_to_first_index = first_index + 1;

if (nth == 0)
{
return 0;
}
else if (nth == 1)
{
return first_index;
}
else
{
var string_after_first_occurrence = string.slice(length_up_to_first_index);
var next_occurrence = nth_occurrence(string_after_first_occurrence, char, nth - 1);

if (next_occurrence === -1)
{
return -1;
}
else
{
return length_up_to_first_index + next_occurrence;
}
}
}

edit: I realized after I signed off last night that you will also need the following function:

function iFrameIndex()
{
return document.getElementsByTagName('iframe').length - 1;
}


This function ensures you are referencing the last iframe element added to the page, which works on my board. It may not work for you if you have an iframe in your footer.

[gajinoz]

I'm using 4.2.3 with PHP 5.4 and do not have the problem, if that is any help. Probably worth the upgrade.