Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.

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

+6 votes
3,967 views
asked Apr 13, 2012 in Plugins by q2apro
edited Apr 13, 2012 by q2apro

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 :)
 

3 Answers

–1 vote
answered Apr 13, 2012 by Aslan
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.
commented Apr 16, 2012 by q2apro
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
asked Apr 16, 2012 in Plugins by monk333
edited Apr 16, 2012 by monk333
Plugin request and discussion - Advanced image handling
0 votes
answered Apr 29, 2014 by abhivin123
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?
commented Apr 29, 2014 by q2apro
Sounds good, and i suggested that already in 2012 ;) Only issue could be that some servers don't allow downloading from external sources.
commented May 7, 2014 by abhivin123
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?
0 votes
answered Aug 12, 2016 by tempo
really great tweak....but it's too old!!!

Do you have a new one (about version 1.7.4)
...