Many of wysiwyg (ckEditor) plugins no longer compatible with qa 1.7!

Question

few months ago, when qa1.63 was the latest stable version of qa, I needed a professional image uploader plugin for ckEditor(wysiwyg editor) so I paid a developer to create that for me( but for the qa16.3 which was the stable one. Now after the qa1.7 the plugin no longer works! It uploads the images in the correct directory but the html img link has broken ref!

Apparently some stuff changed in ckEditor of qa 1.7 which is no longer compatible with qa 1.63!

Same issue is reported by another member here

http://www.question2answer.org/qa/42906/broken-images-issue-in-this-site

My question from Scott is that will there be an official fix for this?

For people like me, limited budget, paying for a plugin and seeing it only working for 2-3 months and not working with new releases of qa 1.7 is not very preferred

Comments

1.7 stable... That's a joke right?

---

@Funrunna where are all your bug reports?

Answer 1

Found it finally!

Thanks to Scott for the tips and the solution proved it to me that the upgrade to the ckEditor plugin of qa1.7 had notthing to with the issue. The issue was the new allowedContent introduced in the ckEditor 4.1 and up

Turns out that the ckeditor() checks that only elements which are in the 'allowedContent' list are possible.

Solution:

we need to add:

"    extraAllowedContent: 'img[!src,alt,width,height]',",

to qa-wysiwyg-editor.php

i.e.

                // Prevent config file being loaded
                "    customConfig: '',",
                "    extraPlugins: 'YOURPLUGIN',",
                "    extraAllowedContent: 'img[!src,alt,width,height]',",

 

IMHO:    extraAllowedContent: 'img[!src,alt,width,height]',",has to be embeded into the wysiwyg plugin

 

more info:

http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules

http://stackoverflow.com/questions/17505757/how-to-allow-img-tag

Comments

Glad you found the issue. Still seems a bit odd to me because there are image/link buttons included in CKeditor that are able to bypass the filter...

Answer 2

Where does your plugin upload the files to, and what is the file path that it puts in the HTML?

The new CKeditor is now placed in a subdirectory so I'm sure it will just be a case of replacing "plugins/yourplugin/images" with "ckeditor/plugins/yourplugin/images" somewhere in the code.

Comments

Sure, I already considered the directory replacement and placed the plugin at ckEditor\plugin\multipleImageUploader
and sure enough updated the image storage path accordingly

but it would appear to me that there are other stuff involved .
I am going to upload something and will share with you the url to show you what is happening

---

Here I created two copies, of qa1.7 exactly identical but one with ckEditorOld on which my multipleImageUpload Plugin is installed and another with  ckEditorNew with again my multipleImageUpload plugin, and by the way, both have their own db

You can test them easily at ( no need to create user, test image uploader anonymously by clicking on ckEditor picture icon):
1- http://brglow.com/qa17ckEditorOld/index.php?qa=ask
images get uploaded at http://brglow.com/qa17ckEditorOld/upload
successfully and displayed in ckEditor

$uploadDir = "../../../../upload/";

2- http://brglow.com/qa17ckEditorNew/index.php?qa=ask
images get uploaded at http://brglow.com/qa17ckEditorNew/upload
successfully but don't get displayed at ckEditor

$uploadDir = "../../../../../upload/"; // one more ../ due to new location of ckEditors at new qa1.7

Please give me your email by private message so I can send you the source of this plugin. You will also see that other existing official ckEditor plugins have issues with the qa1.7 too

---

When I use the new version the image gets uploaded just fine. Here's the one I uploaded.
Image: http://brglow.com/qa17ckEditorNew/upload/16ee9b4fcc38b7726d7d853a2a290b98.jpg
Thumbnail: http://brglow.com/qa17ckEditorNew/upload/t46ad0b363bea1000182ac46de1c39f56.jpg

But it does not add the image to the editor, so I think the problem must be with the JavaScript somewhere. Maybe CKeditor changed how content is added to the editor?

---

OK I think the "advanced content filter" is maybe blocking the image: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter

One thing you could try is in multipleImageUpload.php wrap the image in <p> tags:

$fileout.= '<p><a  class="fancybox" rel="we" href="'.$img_path.$imgPath.'" ><img src="'.$img_path.$thmPath.'" id="ckimg"/></a></p>';

If that doesn't work try setting the allowedContent config variable as described on the linked page above.

---

Thank you for your time.
wrapping the image in <p> tags did not work.

---

If it is a CKEditor plugin issue, probably you could remove them one by one and see whenever the image appears.
Sidenote: This issue seems not be related to the one you've linked in your question

---

@pupi I have done all of that.If you see in my question I explained that the  http://brglow.com/qa17ckEditorNew and  http://brglow.com/qa17ckEditorOld have exactly identical ckEditor core and plugins(same identical copy), but one works the other does not. I can send the plugin to you too

---

Did you try to allowedContent config? You'll; need to add it to the qa-wysiwyg-editor.php script (for now, until we figure out the best thing for config.js).

Something like this should work:

"    extraAllowedContent: 'a img',",

---

No, still not working!

Here is what I did:

// Prevent config file being loaded
                "    customConfig: '',",
                "    extraPlugins: 'multipleImageUpload',",
                "    extraAllowedContent: 'a img',",
                "};",

---

This link is updated with the line above:
http://brglow.com/qa17ckEditorNew/index.php?qa=ask

---

Hold on! I guess I am getting somewhere Scott, i will updates you in few minutes

---

Scott! thank you for your time and helpful tips. I posted the answer here

http://www.question2answer.org/qa/43027/many-wysiwyg-ckeditor-plugins-no-longer-compatible-with-qa?show=43135#a43135

you might wanna consider adding the extraAllowedContent: 'img[!src,alt,width,height]',", to the core