The forum operates in read-only mode. Please head to StackOverflow for support.

Sat, 12/12/2009 - 20:30

dillon

Joined: 21/08/2009

Posts: 10

Create Custom Button

Hello again, how could I create a custom button for CkeEditor so it could insert an image for highslide (which is a image thumbnail viewer)? All I would like it to do is open the window to select an image, change to accommodate for the image location... and put a div tag underneath.. Does anyone have any ideas how to do that? Thanks!

Code To Generate:

<td>
     <a href="IMAGE LOCATION" class="highslide" onclick="return hs.expand(this)">

          <img id="name" border="0" src="IMAGE LOCATION" width="120" height="90" />

     </a>   

     <div class="highslide-caption">TEXT HERE</div></td>

-Dillon

Sun, 12/13/2009 - 10:14

nasca

Joined: 12/12/2009

Posts: 9

Re: Create Custom Button

Download Highslide JS Plugin for CKEditor 3.x from:
http://code.google.com/p/lajox/download ... :highslide

I think the plugin can help you. have fun

Sun, 12/13/2009 - 16:05

dillon

Joined: 21/08/2009

Posts: 10

Re: Create Custom Button

Ok, thanks alot! That was exactly what I was looking for! I got most of it working, but I couldnt figure out the graphics directory folder... Do you know if this is this starting from the public_html folder? It just gives a directory to change, and I am not sure where it is starting... Thanks

4. Modify highslide/js/main.js Content:
Just the line:
hs.graphicsDir = '/editor/custom/ckeditor/plugins/highslide/js/graphics/';

-Dillon

Mon, 12/14/2009 - 05:59

nasca

Joined: 12/12/2009

Posts: 9

Re: Create Custom Button

example:

your web site root is /public_html
you index page is /public_html/index.php
so your homepage url is: http://yoursite.com/index.php

now your ckeditor folder is /public_html/editor/ckeditor
and plugin graphics dir is /public_html/editor/ckeditor/plugins/highslide/js/graphics/

so url is http://yoursite.com/editor/ckeditor/plugins/highslide/js/graphics/

so your can point hs.graphicsDir to /editor/ckeditor/plugins/highslide/js/graphics/

hs.graphicsDir = '/editor/ckeditor/plugins/highslide/js/graphics/';

That means "hs.graphicsDir" is the relative Web Root Path, not a local absolute path!

Thu, 12/17/2009 - 22:00

dillon

Joined: 21/08/2009

Posts: 10

Re: Create Custom Button

Hi, sorry to be a pain in the *, thanks for the help so far! I wasent able to get it working... My website is http://www.websitehere.com/fd/ - the website is inside the fd directory

my ckeditor is inside http://www.websitehere.com/fd/login/ckeditor/

and the graphics url is: http://www.websitehere.com/fd/login/cke ... /graphics/

I tried acouple of different ones but it still didnt work - I just keep getting a loading icon (I attached it)
load.gif

hs.graphicsDir = '/fd/login/ckeditor/plugins/highslide/js/graphics/';

hs.graphicsDir = '/login/ckeditor/plugins/highslide/js/graphics/';

hs.graphicsDir = '/ckeditor/plugins/highslide/js/graphics/';

Thanks,
-Dillon

Fri, 12/18/2009 - 07:13

nasca

Joined: 12/12/2009

Posts: 9

Re: Create Custom Button

hi, you can try :

//hs.graphicsDir = '/fd/login/ckeditor/plugins/highslide/js/graphics/';
hs.graphicsDir = 'http://www.websitehere.com/fd/login/ckeditor/plugins/highslide/js/graphics/';

or upload "graphics" folder to web site root : /public_html/
and then modify the code like:

hs.graphicsDir = '/graphics/';

at last, clear your browser cache, refresh the page

Thu, 01/24/2013 - 14:40

tomjas

Joined: 24/01/2013

Posts: 3

Hi guys!

Can you help with highslide plugin for ckeditor? I just installed it and it's just fine apart from one issue. It replaces original link to a picture with it's own putting into "href=" and "src=" link to the same file. I just want it to leave it like below:

<a href="my image.jpg" class="highslide" onclick="return hs.expand(this)">
          <img id="name" border="0" src="small image.jpg" />
</a>

Probably it's a matter of changing $[3] variable (below), but unfortunatelly I do not know JS and I am quite poor in regexps too.

str = str.replace(/^|(<a\b[^>]*>)?\s*(<img\b[^/>]*(?:src=("[^"]*"|'[^']*'|\S+))[^>]*>)\s*(?:<\/a>)?/ig, function() {
    var $ = arguments;
    if ($[0].length) {
        return [
            '<a href=' + $[3] + ' class="highslide" onclick="return hs.expand(this)">'
            , '<img src=' + $[3] + ' alt="Highslide JS" title="Click to enlarge image"></a>'
        ].join("\r\n");
    } else {return JSVar;}
});

Can you help me?

Wed, 08/06/2014 - 13:30

xaniotis

Joined: 06/08/2014

Posts: 1

opencart issue

Hello, i tried to install the plugin in the opencart but i not succeed!

One button appeared to the editor and when i push it the screen becomes white and that's it

Thank you!