Add links to site pages in CKEDITOR 4

Good day,% habrauser%!

Very often you have to write a mini CMS for different projects. This is justified, to a greater extent, by human laziness. Therefore, in such projects often add a very convenient editor CKEDITOR. And often customers are asked to make convenient functionality for adding links to site materials. There are many descriptions of this process in the network, but most of them are designed for version <4. Recently I was faced with the need to implement this function in the editor.
If you, dear reader, I wonder how to implement it, you are welcome under the cat.

')

Formulation of the problem

When making a CMS even of small sizes, it is very often necessary to provide tools that allow one to do without programmers and layout designers for posting materials on the site. On the one hand, you can simply insert an editor and tell you how to cut links from the address bar so that everything works. But, as is often the case, the performer changes or forgets how it is done.
Therefore, we will add functionality to simply add links to CMS sections / materials.
What do we want to have in the end? We want to have an easy way to select a material to generate a link to it. We do this using a drop-down list.

First step

We assume that we have already downloaded the archive with CKEDITOR and unpacked it into the folder with the project (for convenience, we assume that this is the Scripts folder). Thus, our editor is on the path / Scripts / ckeditor

What's next?

And then we ... no, we will not edit the scripts. This is the next stage of action. First we need to create data on the basis of which a list of materials will be formed.

Some theory

In almost all the manuals devoted to this problem, the authors create hidden input and “push” data into it. But this is not an unconditional way. We can quite well declare a global variable in which the data will be placed, and on its basis initialize the list. I will not particularly delve into such jungle, as it has nothing to do with the topic of the article, so I’ll just describe the option shown in other manuals.
One of the features of the list passed as a parameter is that it must be a JSON object and be an array of string arrays.
Thus, the final object will be something like this:

[['','/index.html'],['','/images.html'],['','/about.html'].....] 

How to create such a list is up to the developer. There are no restrictions.
It remains only to add a container to the page, in which we put our list. Let's create a hidden input that looks something like this:

  <input type="hidden" id="localPageList" value="[['','/index.html'],['','/images.html'],['','/about.html'].....]" /> 

So we prepared the data for work.

Go ahead

Now we get into the scripts. First, open the script that creates the link selection dialog /Scripts/ckeditor/plugins/link/dialog/link.js
Find the words

 id: "linkType", type: "select" 

(the script is minified, so the search is not very convenient. I formatted it, for more convenience)
and add the following lines

 return { title: b.title, minWidth: 350, minHeight: 230, contents: [{ id: "info", label: b.info, title: b.info, elements: [{ id: "linkType", type: "select", label: b.type, "default": "localPage", items: [ [b.toUrl, "url"], [b.localPage, 'localPage'], [b.toAnchor, "anchor"], [b.toEmail, "email"]], onChange: function () { var a = this.getDialog(), b = ["urlOptions", "localPageOptions", "anchorOptions", "emailOptions"], c = this.getValue(), d = a.definition.getContents("upload"), d = d && d.hidden; if (c == "url") { n.config.linkShowTargetTab && a.showPage("target"); d || a.showPage("upload") } else { a.hidePage("target"); d || a.hidePage("upload") } for (d = 0; d < b.length; d++) { var e = a.getContentElement("info", b[d]); if (e) { e = e.getElement().getParent().getParent(); b[d] == c + "Options" ? e.show() : e.hide() } } a.layout() }, setup: function (a) { a.type && this.setValue(a.type) }, commit: function (a) { a.type = this.getValue() } }, //   { type: 'vbox', id: 'localPageOptions', children: [ { type: 'select', label: ' ', id: 'localPage', // " ".     title: '  ,    ', items: eval(document.getElementById("localPageList").value), //   input' localPageList setup: function (data) { if (data.localPage) this.setValue(data.localPage); }, commit: function (data) { if (!data.localPage) data.localPage = {}; data.localPage = this.getValue(); } }] }, //#   

I hope that everything is clear.

At this stage, we have described a new type of link that will be used in the dialogue and initialized with data from our input.
But if we launch the editor now and see the list of links, we will not see the item we created.

Open a new link type in the dialog.

In order for the created link type to appear in the dialog, we must add it to the initialization list.
We are looking for the following line of code:

 b = ["urlOptions", "anchorOptions", "emailOptions"] 

and add the string “localPageOptions” to it to make it like this:

 b = ["urlOptions", "localPageOptions", "anchorOptions", "emailOptions"] 

Now, launching the editor and opening the links dialog we see ... we see the “undefined” item.
"This is a bummer!" - I thought when I first saw it.
But, having rummaged a bit in the code, I realized that the dialogue is trying to find the name for our type in the localization files. And finding nothing simply assigns undefined to the variable that should hold the name. We solve this problem by adding just one line of code to the file / files (if you use multiple localizations).

Edit localization

Open the /Scripts/ckeditor/lang/ru.js file (en.js for English localization).
Search by words:

 "title": "" //   "title": "Link" //   

and add a comma separated line:

 "localPage": " " //   "localPage": "Local page" //   

where localPage is the name of our link type, specified as the id parameter

Instead of conclusion

Not a trivial at first glance, the task took me 1.5-2 hours of time. All manuals that I found on the network were written for CKEDITOR versions 2 and 3. In the fourth version, much has changed and I had to examine the code in order to adapt it to the new API. This experience is useful, but sometimes it is very necessary to do everything quickly.
Therefore, I hope that my post was someone useful.