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

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)