Tweaking CKEditor: Do not allow external images, only allow image uploads!

Question

One of my users used an external image service to post images of maths formulas. Problem: As soon as the image service goes offline, images are lost. So: How to force users to upload images?

The solution I implemented: Hide the image info tab so that the user cannot specify an external URL. Only show the tab of the image upload.

To do this you need to change the qa-plugin/wysiwyg-editor/image.js:

Insert directly after I.preview.setStyle('display','none');}

these lines:

this.selectPage('Upload'); this.hidePage('info'); document.getElementById(this.getButton('ok').domId).style.display='none';

Effect: Upload tab is selected first, Image Info tab is hidden, OK-button of main dialog is hidden.

We show the OK-button again, don't worry, after the user has uploaded an image, using qa-plugin/wysiwyg-editor/config.js

In:

CKEDITOR.on( 'dialogDefinition', function( ev ) {
   //... some code here (see post)

    else if(dialogName == 'image') {
         // ... remove stuff
        dialogDefinition.onLoad = function () {
            // add:

            // on tab switching or automatic after upload
            this.on('selectPage', function (e) {
                // hack to reference and show OK button
                document.getElementById(this.getButton('ok').domId).style.display='inline';
                // after upload the selectPage event is fired, show Image Info
                dialog.showPage( 'info' );
            });
        };
   }

I hope that "tiny tutorial" can help :)
 

Answer 1

Dude you are awesome! This was just something I was looking for. I however succeeded in doing this by removing the external upload button with some CSS tweaks.

Small question, do you have any idea on how these uploaded images automatically can be resized to suit a certain dimension? Problem is that a lot of visitors of my website upload too big images, which I eventually resize with the max-width and max-height CSS properties but this is very cumbersome as some of these images seem to have large file sizes (I don't want to limit my visitors with a certain filesize-limit).

It would be awesome if we you could implement timthumb into images that are manually uploaded.

Comments

here you go, css is your friend:
.entry-content img { max-width: 600px; border:1px solid #AAAAAA; }

edit: ah, just see, you want a real resize. Then you have to use the image properties provided in CKeditor. After the upload you have to get the values of width and height, then recalculate them and write them back in the width and height fields. That could be one solution.

---

something like that (in config.js -> image -> dialogDefinition.onLoad)

var tab = dialogDefinition.getContents( 'info' );
var originalWidth = tab.get('txtWidth');
var originalHeight = tab.get('txtHeight');
// recalculate width and height, i.e. resize ...
// then write back
dialog.setValueof('info','txtWidth',newWidth);
dialog.setValueof('info','txtHeight',newHeight);

not tested, have a go :)

---

Thank you for your reply, echteinfachtv. Point is however, the resizing within CKeditor > image properties, is actually the same as CSS. Only difference is that the width and height are set within the IMG tag. In the end, you still end up with the same problem.. i.e. an user uploading a 1024x768 image of filesize 5MB, which get's resized back to let's say 640x480, either via CSS either via the IMG tag, but still the whole 1024x726 (of 5 MB)  image is being 'loaded' in the page.

Scripts like Timthumb tackle this problem by 'really' resizing the image to 640x480, and thus a far lower filesize.

---

I am in that same boat. Want to use more imageupload for one of my sites but there is a real limitation.

Consumer cams and cels deliver fotos of a large pixel size and as well a large file size. So even if one could implement a resizing function on the server he will get in trouble on very most shared hostings. To resize an image server side the server needs to hold the original image in cache while recalculating. Together with all other tasks easily one will hit a limit which on most shared hostings cant be changed.

Searching around the most reliable solution fro CLIENT side resizing could be www.plupload.com. At least through flash one could have a smooth resizing interface.

It would be great if some one could find a way to implement it.

The second point to mention is that q2a stores the images in the database. This is ok for normal qa pages but if one builds a qa site where images are obligatory, the database becomes really fast really big.

Would be excellent if someone could write matching plugins or tutorials how to achieve clientside resizing through plupload.

---

Plupload sounds very interesting, monk333. Mind you, Flash is not supported on all devices, so i'm kinda reluctant to using that, as 25-30% of the visitors of my website use either a iPhone or a iPad, and HTML5 is still being developed. You're correct on the issue that timthumb might use a lot of resources server-side, but nowadays everyone seems to be using timthumb... especially on Wordpress installations, which are quite a few. Also, recalculating an image happens only once, and then it's cached for good.

---

Just to mention: Timthumb had a security issue. http://wpcandy.com/reports/timthumb-security-vulnerability-discovered

Don't know if fixed in latest version or just affecting wordpress.

---

Jup, that was almost a year ago, and certainly fixed by the latest version(s). Nevertheless, that script is awesome, especially on Wordpress as a replacement of the default image resizing function WP has.

---

Aslan, regarding Plupload i trust in Alex Raabe who wrote the famous NextGen Gallery Plugin for wordpress. http://alexrabe.de/2011/09/18/client-side-image-resize/ .The other point why I would prefer Plupload is that it is written and maintained by the TinyMCE team, what should be a very good reference.

Finally I think client side resizing will become a must soon, as todays standard cameras deliver large dimensions and several megabytes.
A huge percentage simply cant be resized server side on shared hostings. The internet is full of questions reporting this problem. Q2A could make a huge difference here.

Overlooking it from my own view: I am working on page where normal people can upload their pictures through cel or computer to discuss them, like them and rate them.

Q2A is the fastest, the most community like and the easiest to handle script for that task. Even dinosaurs like coppermine or gallery2 just can dream of its features. The only thing whats missing is a smooth image uploading feature which should include client side resizing and may be image editing functionalities.

So, if writing a plugin or include client side resizing in core is not that dificult, it would be an excellent decision to add it. I even would pay to get that feature working.

---

Alright, you convinced me on that, monk333. I also am willing to pay to get such a feature working.  I really need this function where users can very easily 'just only' press an image button and directly insert an image to their post, or attach it. The image upload function within CKEditor is too cumbersome.

---

You found the best words. - Only press an image button - is that what we need asap.

Sadly I am not able to write a matching plugin. So we just can hope that gidgreen implements it with the next version. As well we need a plugin to have the images stored outside the database. So on a big site it would be easier to move them to a CDN and maintain the database small.

I am targeting unexperienced internet users and for them image upload should just work, I cant tell them to reduce the imagedimensions or -size. If they run in trouble because of too large images, they will simply close the page and never come back.

Meanwhile, I will use echteinfachtv´s method (thank You echteinfach !!) to avoid external images.

---

@Aslan, how should it look in Your opinion ? For me it would be fully sufficient to have on the ask/upload page just a image upload dialog just above the editor area. So one could uplod the image and after that add a question or other text and users still could use the editors features.

The admin could decide if he wants to show image dialog and editor or only one of them...

For those images in my case I would need a client side auto resizing.

What are Your needs ?

---

"I am targeting unexperienced internet users and for them image upload should just work, I cant tell them to reduce the imagedimensions or -size."

Spot on! Same problem here.

I actually need functionality to only add images to a  comment or answer, while using a simplified textfield (no CKEditor!), have a look at this mock up:

http://postimage.org/image/9spjra4y5/

Another option would be for me: some image-button where you can upload the image and then directly insert the image into your comment or answer, rather than as an attachment...

I'm fine with both options.

---

Great mock up !

I would like to have that image upload field either above or under the editor area. May be it could be possible as well to store several images like a gallery and even youtube links. Maybe it would need a new table in the database. Ill try to make a mock up as well in a few hours. Including the admin options as well.
Will be back soon..

---

This is exactly what I've been looking for since I first stumbled on Q2A months ago, but since I could never find it, I just moved back to wordpress. Would love to have something like you have in your mockup for comments or on a question edit.

---

By the way, a plugin like this should be very easy for gidegreen or other Q2A developers to develop because they have similar functionality already developed for user uploading of the gravatar. Uploading an image to a comment or question is basically the same thing. Unfortunately, I am a complete novice at PHP, so I could never figure out how to do this. But, I agree, lack of support of basic image uploading is the main feature missing from Q2A at this point.

---

So, to sum it up:

- a single button for image-upload (either include into comment/answer OR attach it)
- automatic image-resize (without CSS!) to a predetermined height and width set by the admin

It would be awesome if someone could develop such a plugin.

---

I would also add, that someone should be able to add an image to a question. So include it in comment/answer/question.

Also, there should be some way to add multiple images, and I guess this can be controlled by the admin. So for example, allow 3 images per comment etc.

---

I know images can be uploaded to the question with the WYSWIG, but the WYSWIG with Q2A is so clunky and not user-friendly (look at all the hacks posted here to make it easier to use), a simple browse/upload for questions also, like there is for the avatar image upload, would be very powerful.

---

Hey guys, how about using this plugin I have found:

http://doksoft.com/soft/ckutils/preview-upload.html

So, this is exactly what I was searching for. the only thing I need to do next is to strip down all the unnecessary buttons of CKEditor and leave it alone with the image-upload button. Besides that, it looks like what I was searching for.

---

Or this one:

http://doksoft.com/soft/ckutils/image-upload.html

Only difference is that you will need CKFinder at the first link I provided, for image-preview. The second link I provided has no image-preview so no CKFinder is needed...

CKFinder costs $ 60 :-(

---

I just e-mailed the developer and he quickly replied he can adjust the Image Upload addon (second link I provided) so it will show a preview, however without using CKFinder. He will charge $150 though...

---

Oh, interesting news, but I do not really understand. It says:

"The plugin does not use CKFinder dialog for selecting a file but you still need the server-side tools for uploading files. You can use CKFinder (recommended) or any other uploader."

What does that mean ?

And second, I do not see how to resize the images at least through css.

If that doksoft imageupload lets one set the maximum width/hight for selected images, it would be really helpful for the moment.

Otherwise we wouldnt gain that much in comparison to the initial solution proposed by echteinfachtv.

Another question would be how the thumbs are stored ?

Will look around a bit.....

---

Hmm, yeah you are right on that, I read over that sentence I guess, you'll still need CKFinder.

Resizing goes with a pre-set of values for width and height I guess, I too need to look around a bit.

---

I understand that the PREVIEW would be the thumb or resized image inside a post. This would give us at least the option to upload an image very easy AND having it in the post with predefined maximum width or hight.

That would resolve everything but not the serverside resizing.

However a huge step in our desired direction allways worth 68.95 .

What makes me think is where the images are stored, as q2a stores them in the database. If this does noy cause problems this solution could work for me.

Better would be clientside resizing through plupload may be in combination with tiny mce. Will read about and see if something turns out.

---

Why don't you open a new question on this as the entire discussion has rarely to do with the subject "Tweaking CKEditor: Do not allow external images, only allow image uploads!"

cheers

Answer 2

This is good. But you know what will be even cooler - To extend the funcationlity rather than restrict. Why can't we have a plugin wherein you give the external link images, these images are uploaded on your server and then inserted. This way you don't loose the external images when they are cleared from external sites and you also provide more sources for users to select there math equations from ...

Does that sounds like a plan?

Comments

Sounds good, and i suggested that already in 2012 ;) Only issue could be that some servers don't allow downloading from external sources.

---

Hmmm. Thanks for reverting.
Then how about giving them an additional option to download either on server or free uploading spaces like dropbox or google drive?

Answer 3

really great tweak....but it's too old!!!

Do you have a new one (about version 1.7.4)