How to get an accessible image insert in CKEditor

[Jaap]

Hey guys!

First of all: I recently found out about Get-Simple and I think it's great. One of my only clients wanted a simple website which she could manage herself, so I ended up here. The only thing she couldn't do in an accessible way was adding an image to a page. First I looked around here but I couldn't find anything about it (but please do correct me if I am wrong here!). I then decided to implement it myself. It's actually very easy, most of it is already available in CKeditor: it's just not used!

Here's what I did to make it work. I am describing the process for people that know something about PHP/HTML and editing files. If anything is unclear or it doesn't work for you, let me know, but I think I traced all my steps as to how I did this!

In admin/edit.php, look for the $toolbar (which one is used depends on whether you use the simple or more advanced one). Insert

Code:

, 'Image'

somewhere in it.

Some lines further, after

Code:

height: '<?php echo $EDHEIGHT; ?>',

insert:

Code:

toolbar :
            [
                <?php echo $toolbar; ?>
                    ],
        filebrowserBrowseUrl : '/admin/upload.php',
            filebrowserWindowWidth : '800',
            filebrowserWindowHeight : '600'
            });

Then, insert somewhere in admin/image.php (At a location that suits you, for my client I inserted it in red just before the normal content would begin)

Code:

<script type="text/javascript">
function setLink(url) {

window.opener.CKEDITOR.tools.callFunction(1, url);
window.close();

}
</script>

            <p><a onclick="setLink('<?php echo tsl($SITEURL) .'data/uploads/'. $src; ?>')"><strong style="color:red">Send to editor (only works when you have the editor open in the window below or so)</strong></a></p>

Good luck!

[ccagle8]

Interesting... I will have to try this. Thanks.. Any issues you've come across doing it this way?

[Jaap]

I didn't came across any issues, only that if you are just in the image-upload part (and thus not having an editor window you came from) the link is still there (though it doesn't work here) — one should hide it in that case for a more proper implementation.

My client just replied that it doesn't work on her computer. I will report when I found out what was wrong. (And I will test it in IE on the university tomorrow.)

[Jaap]

A quick update. I upgraded to a newer version of CKEditor and added this line to admin/template/header.php because somehow Internet Explorer 8 didn't like the onclick property. (I don't know which one did the trick to make it work on the computer of my client, but it does work now.)

Code:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

(I saw something in the development forums about the image thing being available in the toolbar in a newer version of Get-Simple/development build, it might be an idea to make a lightweight version of the upload panel (without the menu but still in the same style) which displays a list of images from which the user can select the image, get a preview and send it with a click to the editor. It's just a tip/an idea.)

[sandeepkashyap]

I followed the steps you mentioned and here is what I am getting every time I try to click on an element calling the JS function 'setLink'.

Error: this._.panel is undefined
Source File: http://localhost/cms/admin/template/js/ckeditor/ckeditor.js
Line: 42

Here are the steps:
Browser: Firefox 3.6+
Environment: Wamp

Steps to reproduce the issue:
Added the code ad per your instructions in edit.php and image.php. After that, managing the the data of a page, clicking on the image icons opens up a popup with "Browse Server" button. Clicking on that further opens up the php file that was set in the edit.php. Clicking the image for details takes to image.php where the JS is placed. And further clicking on the link with your JS function throws the error mentioned above. Any tips?

Thanks in advance

[Jamz]

Anyone had any success with this... just downloaded the latest stable build (looks like this has already been added in the code but commented out)

But when i uncomment the bits needed, the editor dissappears and just shows html instead... as soon as i comment them back up, it comes back

//filebrowserBrowseUrl : '/admin/upload.php',
//filebrowserWindowWidth : '640',
//filebrowserWindowHeight : '480'

[Donsegundo]

Excuse my language (google translator) The problem that causes the disappearance of ckeditor to uncomment one of these lines:

Code:

//filebrowserBrowseUrl : '/browser/browse.php',
            //filebrowserImageBrowseUrl : '/browser/browse.php?type=Images',
            //filebrowserWindowWidth : '640',
            //filebrowserWindowHeight : '480'

is missing the comma, and uncomment any line causes an error in the script.

To run the filemanager of vudu, make the following change in edit.php

Code:

<script type="text/javascript">

                var editor = CKEDITOR.replace( 'post-content', {
            skin : 'getsimple',
            forcePasteAsPlainText : true,
            language : '<?php echo $EDLANG; ?>',
            defaultLanguage : '<?php echo $EDLANG; ?>',
            entities : true,
            uiColor : '#FFFFFF',
                    height: '<?php echo $EDHEIGHT; ?>',
          filebrowserBrowseUrl : 'vudu_filemanager.php', //<--this comma is requerided
            toolbar :                          
            [
                <?php echo $toolbar; ?>
                    ]
                    
            //filebrowserBrowseUrl : '/browser/browse.php',
            //filebrowserImageBrowseUrl : '/browser/browse.php?type=Images',
            //filebrowserWindowWidth : '640',
            //filebrowserWindowHeight : '480'
            });  

            </script>