Additional Dialogs

First:

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

Second:

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

Third:

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

Fourth:

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'
      }
]

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

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:

   // 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))$/;

var parseLink = function( editor, element )

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:

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

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

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

                 {
                    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'
                }

filebrowser : 'info:cmsId'

 
             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