Additional Dialogs

this isn't the easiest to do and it is very simple to make errors while doing it, so test a lot while you are going along.

I did it and this is how I did it:

file changed
/_source/plugins/link/dialogs/link.js

First:
Add you CMS to the linktype dropdown

find the text: id : 'linkType'
this is the element which has the select box of all the options for links
in items just add a name as a handle for your CMS link this is what I did

                  items :
                  [
                     [ editor.lang.common.url, 'url' ],
                     [ editor.lang.link.toCMS, 'cms' ],
                     [ editor.lang.link.toAnchor, 'anchor' ],
                     [ editor.lang.link.toEmail, 'email' ]
                  ],

if you don't want to hassle with the language files just write in ['Internal CMS links','cms'] instead of all the editor.lang bit

Save it. And test to see if your link has magically appeared.

Second:
You need to make selecting the item do something
find: var linkTypeChanged = function()
in the second line down add a nice name for your cms in the partIds
e.g.

         partIds = [ 'urlOptions', 'cmsOptions', 'anchorOptions', 'emailOptions' ],

Third:

create the html to appear when the cms is selected
find the id:linkType that you used before. Scroll down and look at what comes below you will notice
id: UrlOptions
and then
id: anchorOptions

with lots of interesting stuff around them.
pray to go you have a text editor that can open and close those {} brackets to make it easier to work out what starts and stop where.

you need to create a child element to sit with these with an id: cmsOptions

the simplest child you can create to prove concept would be something like below:

{
   type :  'vbox',
   id : 'cmsOptions',
   padding : 1,
   children :
   [
      {
         type : 'html',
         html : '<span>I am here - did I appear?</span>'
      },
   ]
}

now when you select the CMS option you should see the message above. Now obviously what would be more useful than the message is a text area for the url and browse button that would go to your bespoke page that shows all the pages you can link to and return the url you want.

Fourth:
add a browse button

within the children area of your id: cmsOptions you need to add the button functionality
so you children area now looks like:

children:
[
      {
         type : 'html',
         html : '<span>I am here - did I appear?</span>'
      },
      {
         type : 'text',
         id : 'cmsId',
         label : 'Your CMS Link',
         setup : function ( data )
         {
             if( data.cms)
                 this.setValue( data.cms.cmsId);
         }
         commit : function ( data )
         {
            data.cms.cmsId = this.getValue();
         }
      },
      {
         type : 'button',
         id : 'browseCMS',
         label : editor.lang.link.cmsBrowse, 
         onClick : function()
         {
           var dialog = this.getDialog();
           var editor = dialog.getParentEditor();
           editor._.filebrowserSe = this;
           var width =  '80%';
           var height = '70%';
           var params = {};//this.filebrowser.params || {};
           params.CKEditor = editor.name;
           params.CKEditorFuncNum = editor._.filebrowserFn;
           if ( !params.langCode )
             params.langCode = editor.langCode;
           var tempurl = editor.config.filebrowser_cmsbrowse;
           var url = addQueryString( tempurl, params );
           editor.popup( url, width, height );
          },
          filebrowser : 'info:cmsId'
      }
]

For easy of updating I have placed the url of bespoke page for internal links as an item in config but you could as easily have written the line:

var tempurl = '/my/path/to/cms-browse.html';

I have used a function addQueryString to build my string which I stole from elsewhere in CKeditor. Just put this at the end of the link.js page after everything else.

function addQueryString( url, params )
{
 var queryString = [];

 if ( !params )
   return url;
 else
 {
  for ( var i in params )
    queryString.push( i + "=" + encodeURIComponent( params[ i ] ) );
 }

 return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
};

Fifth:

Bits and bobs left to tidy up.
my cms links are obvious and easily seperated from normal urls as they are always prefixed with a standard path so I have added a Regex so the system can automatically know that certain links are to be rendered withthe cms dropdown rather than just url
I add my Regex (cmsRegex) in with the emailRegex anchorRegex etc

   // Loads the parameters in a selected link to the link dialog fields.
   var emailRegex = /^mailto:([^?]+)(?:\?(.+))?$/,
      emailSubjectRegex = /subject=([^;?:@&=$,\/]*)/,
      emailBodyRegex = /body=([^;?:@&=$,\/]*)/,
      anchorRegex = /^#(.*)$/,
      urlRegex = /^((?:http|https|ftp|news):\/\/)?(.*)$/,
      cmsRegex = /^(\/(?:cgi-bin|perl)\/[^\/]*\/)(\d+)$/,
      selectableTargets = /^(_(?:self|top|parent|blank))$/;

so Ithen had to alter the

var parseLink = function( editor, element )

to use my Regex

here is part of the function that I altered to play with my cmslinks

var parseLink = function( editor, element )
   {
      var href = element ? ( element.getAttribute( '_cke_saved_href' ) || element.getAttribute( 'href' ) ) : '',
         emailMatch = '',
         anchorMatch = '',
         urlMatch = false,
         cmsMatch = '',
         retval = {};

      if ( href )
      {
         emailMatch = href.match( emailRegex );
         anchorMatch = href.match( anchorRegex );
         urlMatch = href.match( urlRegex );
         cmsMatch = href.match( cmsRegex );
      }

      // Load the link type and URL.
      if ( emailMatch )
      {
         var subjectMatch = href.match( emailSubjectRegex ),
            bodyMatch = href.match( emailBodyRegex );
         retval.type = 'email';
         retval.email = {};
         retval.email.address = emailMatch[1];
         subjectMatch && ( retval.email.subject = decodeURIComponent( subjectMatch[1] ) );
         bodyMatch && ( retval.email.body = decodeURIComponent( bodyMatch[1] ) );
      }
      else if ( anchorMatch )
      {
         retval.type = 'anchor';
         retval.anchor = {};
         retval.anchor.name = retval.anchor.id = anchorMatch[1];
      }
      else if ( cmsMatch )
      {
         retval.type = 'cms';
         retval.cms = {};
         retval.cms.cmsId = cmsMatch[2];
         retval.cms.wmsprefix = cmsMatch[1];
      }
      else if ( href && urlMatch )      // urlRegex matches empty strings, so need to check for href as well.
      {
         retval.type = 'url';
         retval.url = {};
         retval.url.protocol = urlMatch[1];
         retval.url.url = urlMatch[2];
      }
      else
         retval.type = 'url';

Sixth:

tweak the onOk function that is fired when someone clicks the OK button

in the switch/case statement I added a case 'cms' so it would do stuff with my cms link. I basically took the url case and tweaked it. Here is a simplified version of what I did (my cms had a prefix to play with as well)

      case 'cms':
               var cmsURL = ( data.cms && data.cms.cmsId ) || '';
               attributes._cke_saved_href = (cmsURL !='') ?  cmsURL : '';
               break;

Now as long as you have sacrificed to the javascript gods.. it should all work....
remember small changes and see if things have worked.
Good luck.

Thanks a lot for the great instructions on how to modify the link plugin. It's all worked perfectly for me EXCEPT that I don't know how to get the link I'm interested in back INTO the link dialog from the externally generated set of cms links. I'm assuming i have to trigger some sort of method call and pass in the appropriate js object with my cms info, but WHAT is that method and how do you trigger it from an externally generated page of links.

If you could show the sample code for the php or perl script that generates the set of cms links and the js code for how to trigger the right method in the opener once you select a cms link, that would be great.

I tried the same method and I can see all the CMS option(s) which is great, but when I click 'OK', it gives me javascript error ... "cms is null not an object"

I think cms.data is not even defined......

quite urgent guys.

Add

if ( !data.cms )
            data.cms = {};

to the commit block.

Thanks for this detailed walkthrough - it looks great. This is exactly what I'm trying to do (add a button to popup a "CMS Article Browser" window (already written) that will pass the path to the selected article back to the 'Link' dialog.

Unfortunately, I'm having trouble getting started though - in Step 1, when I add my new element to the linktype in /_source/plugins/link/dialogs/link.js as follows:

items :
                  [
                     [ editor.lang.link.toUrl, 'url' ],
                     [ 'Links to Internal CMS Articles', 'article' ],
                     [ editor.lang.link.toAnchor, 'anchor' ],
                     [ editor.lang.link.toEmail, 'email' ]
                  ],

I save and reload the page, but the items in the linkType dropdown have not changed - they remain:
"URL"
"Link to anchor in the text"
"E-mail"

Obviously I need to get this part working before moving on to step two. Any suggestions? Is there another file that needs to be changed or refreshed in order to get the changes to appear?

Thanks in advance!

Update - this didn't work either:


Added this to _source/lang/en.js ('en' is set as the language in config.js - even though it should be defaulting) :

                toUrl      : 'URL',
      toArticle   : 'Article',
      toAnchor   : 'Link to anchor in the text',
      toEmail   : 'E-mail',

And this to _source/plugins/link/dialogs/link.js :

                                      items :
                  [
                     [ editor.lang.link.toUrl, 'url' ],
                     [ editor.lang.link.toArticle, 'article' ],
                     [ editor.lang.link.toAnchor, 'anchor' ],
                     [ editor.lang.link.toEmail, 'email' ]
                  ],

I'm having the same problem as mataleao22. I'm sure there's an obvious solution that both of us seem to be missing.

edit: i use this solution: viewtopic.php?f=11&t=18327

---
old problem:

hi, a have problem with filebrowser...

in editor configuraiton i have this:

filebrowserBrowseUrl :      'js/ckeditor/plugins/kfm',
filebrowserCmsBrowseUrl :   'article/category-tree-popup', 
...

when in this code

                 {
                    type : 'button',
                    id : 'browseCMS',
                    label : "Find cms article...",
                    onClick : function()
                    {

                        var dialog = this.getDialog();
                        var editor = dialog.getParentEditor();
                        editor._.filebrowserSe = this;
                        var width =  '80%';
                        var height = '70%';
                        var params = {};//this.filebrowser.params || {};
                        params.CKEditor = editor.name;
                        params.CKEditorFuncNum = editor._.filebrowserFn;
                        if ( !params.langCode )
                            params.langCode = editor.langCode;
                        var tempurl = editor.config.filebrowserCmsBrowseUrl;
                        var url = addQueryString( tempurl, params );
                        editor.popup( tempurl, width, height );
                    }
                    ,filebrowser : 'info:cmsId'
                }

on last row i have filebrowser : 'info:cmsId', in pupup started KFM,
if i comment this row, in popup started correct my page...

but i this state i dont know, how i define in my page return value, i dont know how i "tell" , that this return value i will in cmsId input write...

what is wrong with parametr filebrowser: ? any idee?

(from introduction i skip article 5)

---

solution (+-):

 
             filebrowser :
             {
                 action : 'Browse',
                 url : a.config.filebrowserCmsBrowseUrl   // this set correct path to page
             }

edit: i use this solution: viewtopic.php?f=11&t=18327

Hi,

I am developing a CMS and I need help with the code in this topic. My article pages will be stored in mysql. Is there any way, I can populate a list from the db.

Let me know if it is possible and if anyone can help me with the code.

Thanks,
Darshan