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

Wed, 04/07/2010 - 01:40

wmbiz

Joined: 27/03/2010

Posts: 7

Tutorial on how to modify Links Plugin to link to cms pages

After ploughing through this forum for days on end, I have finally come up with this simple yet effective method on how to link to internal cms pages using the Links Dialogue.

This method adds a button in the Links dialogue which when clicked, will open a window listing all your available cms pages as links. When a cms page link is clicked, the URL field of the Links dialogue is populated with its URL. It will also change the link protocol to Other.

First we bring a clean plugin file to work with.

copy this File:
ckeditor\_source\plugins\link\dialogs\link.js
into this Folder:
ckeditor\plugins\link\dialogs
overwriting the existing File.

Now we need to add a button to the Links dialogue.

From the ckeditor\plugins\link\dialogs\link.js file, locate this block of code (it should be around about line 510):

{
    type : 'button',
    id : 'browse',
    hidden : 'true',
    filebrowser : 'info:url',
    label : editor.lang.common.browseServer
}

and replace it with this:

{
    type : 'hbox',
    widths : [ '50%', '50%' ],
    children :
    [
        {
            type : 'button',
            id : 'browse',
            hidden : 'true',
            filebrowser : 'info:url',
            label : 'Link to File on Server'  // See Note 1 
        },
        {
            type : 'button',
             id : 'browseInternal',
             label : 'Link to WmsCms Page',    // See Note 2
             filebrowser :
             {
                 action : 'Browse',
                 url : '../cmsAdmin/intLinks.asp'    // See Note 3
             }
         }
    ]
}

Note 1: I hard coded the label on the existing browse button as I thought it makes more sense. You can keep the old name if you like.
Note 2: This is the label for the button that opens the CMS Links popup.
Note 3: This is the URL to your Internal Links file relative to the ckeditor\ckeditor.js file.

Internal Links File Setup

This is a very simplified version of how my intLinks.asp page is parsed into html.
It should be pretty easy to follow.

<html>
<head>
<title>Link to CMS Page</title>

<script  language="JavaScript">
<!-- 
function AddLink(txtLink) 
{
    var dialog = window.opener.CKEDITOR.dialog.getCurrent();
        dialog.setValueOf('info','url',txtLink);  // Populates the URL field in the Links dialogue.
        dialog.setValueOf('info','protocol','');  // This sets the Link's Protocol to Other which loads the file from the same folder the link is on
        window.close(); // closes the popup window
} 
-->
</script>
</head>

<body>
<h3>Internal Links</h3>
<p>
<a href="JavaScript:AddLink('default.asp?pid=1')">HOME</a><br> 
<a href="JavaScript:AddLink('default.asp?pid=2')">ABOUT US</a><br>
<a href="JavaScript:AddLink('default.asp?pid=3')">PRODUCTS</a><br>
<a href="JavaScript:AddLink('default.asp?pid=4')">SERVICES</a>
</p>
</body>
</html>

Of course, you can use any language you want for the internal links page as long as the javascript follows what's going on in mine.

I hope someone finds this tutorial useful.

-Nico

Tue, 04/13/2010 - 12:05

knedle

Joined: 07/04/2010

Posts: 3

Re: Tutorial on how to modify Links Plugin to link to cms pa

nice - easy - working

my solution JS on popup page - using jQuery on UL LI A tree...

        <script type="text/javascript" >
        <!--
        $(document).ready(function(){
           $("a").live("click", function(){
               var href = $(this).attr('href');
               var dialog = window.opener.CKEDITOR.dialog.getCurrent();
               dialog.setValueOf('info','url',href);  // Populates the URL field in the Links dialogue.
               dialog.setValueOf('info','protocol','');  // This sets the Link's Protocol to Other which loads the file from the same folder the link is on
               window.close(); // closes the popup window
               return false;
           });
        });
        -->
        </script>

thx nico/wmbiz

Thu, 05/06/2010 - 19:28

themedialounge

Joined: 06/05/2010

Posts: 1

Works great in IE but not in Chrome

This works great in IE, but won't change in Google Chrome, in fact Chrome seems to run without the plugins folder. Any ideas how I can make the same change in Chrome?

Thanks

John

Thu, 08/19/2010 - 09:47

joanteixido

Joined: 21/04/2010

Posts: 3

Re: Tutorial on how to modify Links Plugin to link to cms pa

Nice tutorial,

now i'm guessing how to add on dialog link menú one combobox filled by serverside script via ajax.

Something like this in line 400, where it's possible to add a combobox:

{
type: 'select',
id: 'internalOptions',
label: 'Internal links',
items:
[
/** here i don't know how to load the links options via AJAX
],
setup : function( data )
{
/** i supose that here i could load the serverside script, but i don't
know how to add to options select tag.

},

Fri, 08/20/2010 - 07:16

joanteixido

Joined: 21/04/2010

Posts: 3

Re: Tutorial on how to modify Links Plugin to link to cms pa

i find another possible solution.

I've added a combobox in the dialog window and attach a onload event that adds the options tags to the combobox.

Something like this in line 400

{
type: 'select',
id: 'internalOptions',
label: 'Internal options',
onLoad: function ( data )
{
e = this.getInputElement().$;
$(e).load(editor.config.internal_links_url);
//where editor.config.internal_links_url is a serverside script that returns a collection of <option>tag.
},
commit : function( data )
{
if ( !data.url )
data.url = {};

data.url.protocol = this.getValue();
}

}

Fri, 10/01/2010 - 13:14

exmx

Joined: 27/07/2010

Posts: 7

Re: Tutorial on how to modify Links Plugin to link to cms pa

Nice tutorial!

One question: How do I configure the width and height of the popup window? :oops:

Mon, 01/24/2011 - 21:13

lzoumas

Joined: 16/12/2008

Posts: 8

Re: Tutorial on how to modify Links Plugin to link to cms pa

I have the same question, how do i configure the width and height of the popup window?

Thanks in advance!

Fri, 02/11/2011 - 17:39

sami_chang

Joined: 11/02/2011

Posts: 1

Re: Tutorial on how to modify Links Plugin to link to cms pa

nice work 2 questions :
- how can I change popup size ?
- I would like to automatically close the URL dialog window after clicking on a CMS url
thanks

Tue, 05/10/2011 - 15:48

luisete.serrano

Joined: 10/05/2011

Posts: 1

Re: Tutorial on how to modify Links Plugin to link to cms pa

Could you helpme for modify this plugin to allow the lotus notes links (notes://)

Thanks in advace

Sat, 08/06/2011 - 15:55

#10

getrajeshonline

Joined: 06/08/2011

Posts: 1

Re: Tutorial on how to modify Links Plugin to link to cms pa

Hi
This was a nice article and so helpful
I just want to warn those who are using old versions (prior to 3.6), that this might not work well
I spend almost 4-5 hours and ended up installing the newer version and it worked in a swift

Thanks again
Regards
Rajesh

Sun, 12/11/2011 - 23:41

#11

sieppl

Joined: 11/12/2011

Posts: 1

Re: Tutorial on how to modify Links Plugin to link to cms pa

Thank you very much for the great post. I just registered here, just to thank you!!

btw: To insert notes url just extend in link.js following part:

                                 [ 'http://\u200E', 'http://' ],
                                 [ 'https://\u200E', 'https://' ],
                                 [ 'ftp://\u200E', 'ftp://' ],
                                 [ 'news://\u200E', 'news://' ],

Sun, 08/05/2012 - 09:37

#12

gehrcke

Joined: 23/01/2012

Posts: 2

Re: Tutorial on how to modify Links Plugin to link to cms pa

Thank you - You have made my day
I have been searching for this for months and months.

Any chance I could define a different location of the link.js file?
In ASP eg.:
oEditor.instanceConfig("link-dialog-definition") = "/somefolder/link.js"

... or some similar solution?
When upgrading ckeditor this would be nice!

Sun, 03/31/2013 - 09:15

#13

madhab452

Joined: 31/03/2013

Posts: 1

customizing url

how can i customize [internal_link%20id=237] to slug of the page

Thu, 05/02/2013 - 21:19

#14

l.williamson@e-...

Joined: 02/05/2013

Posts: 1

Problems with Inline links

I've got the above to work with no problems [thanks wmbiz] in the standard editor. However since replacing the plugins\link\dialogs\link.js file and making the changes. I'm having issues with creating links using the inline editing. It appears as if the highlighted text becomes unselected. Has anyone else experienced a similar issue or know how I can resolve this rather frustrating problem. Many, many thanks.

Mon, 07/15/2013 - 18:09

#15

tablatronix

Joined: 15/07/2013

Posts: 2

Dynamic solution

This works great when I modify links.js, any ideas on how to get it working dynamically ?

I am using on dialogDefinition to add a page filebrowser button just as in first post, but no events are binded to the button.

Anyone know how to initialize this dynamically, without having to modifying the link source ? Perhaps the buttons events are only hooked up when the dialog in initialized, is there a way to modify the dialog and re-init it or setup ?

Mon, 07/15/2013 - 20:20

(Reply to #15) #16

tablatronix

Joined: 15/07/2013

Posts: 2