CKE: Add configuration option to add a list of pre-define list of links to the link dialog

[amos]

I found 2 (still unresolved) tickets for FCK here: ​http://dev.ckeditor.com/ticket/288, ​http://dev.ckeditor.com/ticket/2393.

This is highly important when looking for a WYSIWYG editor for a CMS, which I believe is huge share of the usage of CKE.

I think it is fairly simple to add to the core. An example way to change the link plugin so it supports this feature is explained here: ​http://blog.xoundboy.com/?p=393, but it shouldn't be something that one needs to change the core to achieve.

The CKE API to manipulate the dialogs is not strong enough for this and only lets you add things to dialog tabs, and not to more specific parts of the dialog - for this feature a new "link type" option should be added, and a new "vbox" (not sure what it is) should be linked to it, and then there is a need to set up the list of links and the behavior of select box to add the link to the content. Besides this should really be something configurable on a config file basis and not on the fly with a JS event.

Thank you!

Amos

[amos]

Just to emphasize this ticket is about CKE and not FCK.

Thanks, Amos

[amos]

This ​is possible in TinyMCE since years ago.

[amos]

does anybody know if there is any reason this ticket is being ignored?

if i did something wrong i would be happy to know and improve...

thanks, amos

[Alfonso Martínez de Lizarrondo]

dup of #288

[amos]

Replying to alfonsoml:

dup of #288

1. this is not a duplicate as 288 works with fck and this ticket is for cke.

2. the solution in ​http://blog.xoundboy.com/?p=393 is not good for two reasons:

1. it changes the links plugin core functionality.
2. it doesn't work with the newest version of cke (probably a side effect of what i wrote in reason 1).

this should be very easy to implement by cksource. there should just be a need to send a json object with titles and links as a configuration option, and another select option should be shown in the linkType element that will bring that list of links.

i have managed to make it work partially without changing the core plugin, through the API like this:

function linkShortcut(linkURL)
{
	var d = CKEDITOR.dialog.getCurrent();
	d.setValueOf("info", "url", "/"+linkURL);
	d.setValueOf("info", "protocol", "");
}

// When opening a dialog, its "definition" is created for it, for
// each editor instance. The "dialogDefinition" event is then
// fired. We should use this event to make customizations to the
// definition of existing dialogs.
CKEDITOR.on( 'dialogDefinition', function( ev )
	{
		// Take the dialog name and its definition from the event
                // data.
                var dialogName = ev.data.name;
                var dialogDefinition = ev.data.definition;

                // Check if the definition is from the dialog we're
                // interested on (the "Link" dialog).
                if ( dialogName == 'link' )
                {
                	var infoTab = dialogDefinition.getContents( 'info' );
                	var urlOptionsPanel = infoTab.get('urlOptions'); 
                	urlOptionsPanel.children.push({
								id : 'internalLink',
								type : 'html',
								html: output
							});

where output is a javascript variable the holds a list of html elements with an onClick event that send the correct link url to the function linkShortcut (see above). This can be easily done with a server side script sending a JSON object to be parsed by the client side javascript.

Here is an example for the end results of the output variable that I'm using, which is also styled a bit:

<strong>Internal pages:</strong><br>
<span style="color: blue; cursor: pointer; text-decoration: underline;" onclick="linkShortcut('home')">home</span><br>
<span style="color: blue; cursor: pointer; text-decoration: underline;" onclick="linkShortcut('about-us')">About</span><br>
<span style="color: blue; cursor: pointer; text-decoration: underline;" onclick="linkShortcut('customer-support')">Customer Support</span><br>
<span style="color: blue; cursor: pointer; text-decoration: underline;" onclick="linkShortcut('contact-us')">Contact Us</span><br></p>

This works, and there was no need to touch the CKE code, but it is not perfect as the best way will be to add another item to the link type list, but this cannot be done through the API (you *can* actually add it to the list through the API but you *can't* change the onChange even associated with this element as it is part of the plugin.)