How to set custom link browser in CKEditor?

Question

CKEditor documentation describes "File Browser (Uploader)" which appears when user clicks insert image button.

But I see no documentation about dialog which appears when user clicks insert hyperlink button. This dialog also has "browse on server" button which shows file browser. But I have my won list of server pages on my site. Can I configure my custom list here, not browsing for file?

codewaggle codewaggle · Accepted Answer · 2012-07-18T10:12:37

You can make a custom plugin or modify the default link plugin.

To make a custom plugin, create a directory in /plugins with the name you want to use for the new plugin, then copy the contents of the _source/plugins/link directory into your new directory. You'll need to change the plugin name throughout those copied files. Then modify the dialog files to suit your needs. Then load your new plugin with the config.extraPlugins setting and add the button to your config.toolbar_xxx setting.

To modify the existing link plugin, copy the uncompressed file for the link dialog window from:
_source/plugins/link/dialogs/link.js

and replace the:
plugins/link/dialogs/link.js

Then modify that dialog window file, one approach would be to populate a select element with your list of server pages.

You could change the url text field:

type : 'text',
id : 'url',
label : commonLang.url,
required: true,

To this:

type : 'select',
id : 'url',
label : commonLang.url,
required: true,
'default' : 'xxx',
items :
[
  [ 'Link Name', 'Link Path' ],
  [ 'Link Name', 'Link Path' ],
  [ 'Link Name', 'Link Path' ],
  [ 'Link Name', 'Link Path' ]
],

Then go through the functions associated with the url element, removing the ones you don't need and modifying the remaining functions to do what you want.

How to set custom link browser in CKEditor?

1 Answers