Broken images issue in this site

Question

It seems the update to 1.7, particularly, the CKEditor update, resulted in some broken image smileys. I think the smileys plugin is missing now so the images can not be fetched :(

EG: The question post in http://www.question2answer.org/qa/42736 links to http://www.question2answer.org/qa/qa-plugin/wysiwyg-editor/plugins/smiley/images/whatchutalkingabout_smile.gif

I can live without the whatchutalkingabout image (I guess), but I'm not sure I can do so with the broken image links :)

Comments

I also confirmed it. Some plugins may have been integrated into the core during the upgrading CKEditor. However, It has decreased significantly. Standard (Pre-installed) plugins of CKEditor that are bundled will need to review again.

CKEditor plugin of 1.6.x : 38
CKEditor plugin of 1.7.x : 11

---

Dang! I guessed it there is something wrong with the update, but i thought it is all because of the change in directory structure(e.i. from wysiwyg-editor\ to  wysiwyg-editor\ckeditor. My ckeditor multiple-image upload plugin is also experiencing same issue, broken image links and that kept me wondering around for 3 days straight trying to debug the ajax calls and php code with my limited knowledge!

---

I've added what I think should workaround the issue without any risks. Please, give it a try and let me know the results

Answer 1

Ok so there are changes in plugins and URLs as well. The quick and dirty that should have this fixed (untested as I'm a bit busy today) is to add all the resources that can no longer be found. AFAIK, smileys are the only ones affected.

In 1.6.3 they are located here (look at the directory structure): https://github.com/q2a/question2answer/tree/v1.6.3/qa-plugin/wysiwyg-editor/plugins/smiley/images

In 1.7.0 they just don't exist. If they existed they would be in the smileys plugin here https://github.com/q2a/question2answer/tree/e9b4627ad69a54f33f7292c4968f2e478e617412/qa-plugin/wysiwyg-editor/ckeditor/plugins

So if images are fetched from wysiwyg-editor/plugins/smiley/images then just copy that directory (with the images included) and recreate all that structure in your 1.7 installation. This means creating the directory plugins, inside of it the directory smiley, inside of it the directory images and inside of it place all the images from the repo I've linked in the 1.6.3.

This should fix the issue until an official fix is released.

Plan B, you can update the content of all the posts so that it now links to the new image path. This one is more dangerous so I'm omitting this approach :)

Comments

Yes, I am aware :)

To begin, there are a few reasons I took out plugins:
1. To keep the download size small (hence why we had that issue with the removed language files).
2. Many were redundant or no longer available (e.g. adobeair, bbcode).
3. Many I felt were not all that useful (e.g. flash, xml).

The smiley plugin was mostly for #1, it's over 400KB in total. But I'd be happy to put it back if people want it, especially since it could help with backwards compatibility.

As you've already pointed out even if I integrated the smiley plugin again, the old URLs would still be incorrect... should be fairly simple I suppose to have an upgrade with a MySQL REPLACE query.

---

IMHO,
1- Any attempt to make the dowanload size smaller is well appreciated as ckEditor is heavy by nature and this is its biggest con.

2-the new ckEditor structure is cleaner and easier to deal with ckEditor updates.

3- @pupi I reported similar issue (ckEditor wise) at http://www.question2answer.org/qa/43027/many-wysiwyg-ckeditor-plugins-no-longer-compatible-with-qa?show=43053#c43053
 I have a feeling that ckEditor needs one more tiny step to become standard so people use their own costume plugins with it.

---

@pupi1985 the smiley plugin has been put back in the dev branch. Do you have any ideas to fix the broken images? Technically this query would work:

UPDATE qa_posts
SET content = REPLACE(content, 'wysiwyg-editor/plugins/smiley/images', 'wysiwyg-editor/ckeditor/plugins/smiley/images')
WHERE format='html' AND content LIKE '%wysiwyg-editor/plugins/smiley/images%'

It could potentially be slightly destructive - for example this comment I'm writing would get edited. The other issue is that the posts would not be indexed correctly, although I'm not exactly sure how indexing works for 'words' inside HTML code.

Any ideas/input?

---

I've been thinking in a couple of alternatives but couldn't find a perfect one that fulfills all of these objectives: single query, SQL only, multi replacements per post, all kinds of smileys get replaced (sad, angry, etc), it is as safe as possible and it is efficient.

Regarding safeness, I think that could be achieved by replacing based on the unescaped "<" in the "img" tag. That way nothing should be accidentally replaced. Considering MySQL's extremely poor regular expression support, the best approach I could think of is:

1. Fetch all posts that have smileys:

SELECT postid FROM ^posts
WHERE content REGEXP
    '<img alt="[^\"]*" height="20" src="${PLUGIN_ROOT_URL}/plugins/smiley/images/[^\.]+.gif" title="[^\"]*" width="20">'

The "alt" and "title" attributes can be replaced with a set of the actual possible values but I don't think it is necessary. Also note there are matching "<" and ">" that should not allow false positives. The ${PLUGIN_ROOT_URL} is actually a fixed value for all posts and is calculated before running the select statement and used as a parameter.

2. Perform the appropriate string replacements using the decent regular expression functions from PHP. This is actually trivial.

3. Update each post one by one. This could be done in batch by executing the query you mentioned but still could result in false positives (the ones that have the false positive itself and also a smiley matched with the REGEXP.

4. I think the reindexing of post is not a big deal. I don't actually remember if what gets indexed is the html or just the text. I think it is just the text. Anyway, in the awkward case in which the HTML attributes get indexed too then there is a single flag to set in the DB migration that automatically performs the reindexing after executing the query.

The other approach, the unsafe one, is to execute your query. Anyway, although it is unsafe, I don't think many forums are actually pasting that string in posts (only this one or maybe ckeditor's ones). So I think it wouldn't be THAT bad to merge your query with the matching results in item #1 decreasing the chance of errors. The error would be adding "/ckeditor" in a comment text that contains the src="${PLUGIN_ROOT_URL}/plugins/smiley/images/ string and also happens to have at least a smiley from v1.6.3 and below.

That's all I can think of.