Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+8 votes
2.1k views
in Plugins by
If I copy paste an image in the editor and save, I get an error saying 'Maximum length is 12000 characters'.  The image appears fined after it is pasted.  Only when I save the question or answer I get that error.  Also, the image is now converted into a long text.  If I select a small image, then there is no error, but the image does not appear in the question/answer.

I've enabled image upload in the WYSIWYG editor.  But when I select image and click 'send it to server', I don't see any activity after that.  On the server I do see a 'POST /wysiwyg-editor-upload?qa_only_image....' request for which got a 200 response.  On the browser there is no progress.  I can't use the editor any further as OK says 'Image source URL is missing' and Cancel does not do anything.

I see a lot of questions here with images in them.  How was that done?  Copy paste of an image seems very intuitive.
Q2A version: 1.8.6

1 Answer

+2 votes
by
selected by
 
Best answer

You've asked three different questions. They have to be addressed separately.

1. Why you're getting the Maximum length is 12000 characters error

When you copy/paste the image, CKEditor is turning it into its base64 representation. Just as a reference, the base64 representation takes around an additional 30% over the image size. As 12000 characters is less than 12KB, then any image of that size will exceed the post content. Take into account the post content is plain HTML. So this is unavoidable, unless you configure some CKEditor plugin to generate an automatic upload, such us with this plugin.

2. Why the image is not displayed, even if it is small

This is a completely different issue. There is a library that filters dangerous HTML content. Using base64 images is considered dangerous based on the current configuration. I believe this is a miss rather than the real intention. You can change this behavior editing this line and turning it into:

'schemes' => 'src: data; href: aim, feed...

3. Why you don't see any activity after clicking the Send it to server button 

Something is wrong here. What should happen is that you would be taken to the tab on the left (Image info) and you would see the image you've uploaded.

I could only replicate a similar outcome to yours, if I exceed the maximum file upload size configured in the server. Check this SO question which seems clearer than the PHP official documentation. In that case, get a 200 Status code but the content of the response states:

Warning: POST Content-Length of XXXX bytes exceeds the limit of YYYY bytes in Unknown on line 0

No file chosen

I can even see that on top of the Send it to server button. There is no immediate fix for this. In fact, the only thing to do here is to avoid showing errors on the UI. Tweaking your server settings will have to do it.

by
+1
Good. Your current issue should have been addressed by item 2 in my answer
by
You mean 'src: data;'?
No it hasn't...

I just noticed in tshark output that the http response itself contains the 'denied' word before the link.  This is not browser issue.  For some reason Q2A is adding this.

But what you mentioned in point 2 makes sense.  It should have solved.  Let me dig some more.

FYI: I see this in all browsers, private mode and with all Apache2 configurations set to default.
by
Maybe some plugin is overriding that behavior? Other custom editors maybe?
by
+1
Item 2, with modification solved the problem!
'schemes' => 'href: data, aim, feed..

More info:
Removed all other plugins except the editor and still saw the same behaviour.
tshark showed that the browser sent the correct image url.  However event log showed 'a_post' which already had 'denied:' prepended to the image url.  'qa_posts' table also showed the content contained 'denied:' prepended to the image url.  Read up htmLawed and experimented and got it working.  Also '*: data' also works but 'href:data' appears more restrictive (safer).
...