CKEditor: "Browse server" for a large number of resources

Posted on November 27, 2012 by Paolo Predonzani

“Browse server” is a useful feature of CKEditor to select a resource (a page, an image, etc) among those available on the server. While it's a supported feature, its implementation is not included in CKEditor but left to the developer, who will need to create a front-end to present the list of resources to the user, to handle the interaction and to capture the selection.

Typically this front-end is implemented as a dialog containing a tree of folders and resources. The following picture shows and implementation provided by CKFinder, a product that can be integrated with CKEditor.

This approach works well if the number of folders and resources is reasonable but, if the number of nodes in the tree is large, it can become unmanageable for the user.

When can that happen? In Portofino 4 we have a mixed situation of CMS and CRUD, where some resources (e.g., /just-a-page) are simple web pages, while others (e.g.., /tickets/56, where “56” is the primary key of a table called "tickets") are extracted from a database. The resources in the database cannot be known in andavance and can potentially be many. If we had to present them in a tree, we could end up with hundreds or thousands of nodes.

A browser in an iframe

In version 4.0.8 of Portofino, which will be released at the beginning of December 2012, we have implemented an approach based on simplicity: the selection of a page happens by navigating the site inside an iframe. When the user finds the desired page, he only needs to press the Choose button.

Once Choose is pressed, the dialog closes and the url of the selected resource is shown inside CKEditor.

With this approach it is not important if the selection is a CMS page or a CRUD page, or how many nodes are in the tree. In the case of a CRUD with many objects, the user can use the search feature to narrow down the number and eventually find the desired object with ease.

Advantages

The main advantage is that the user can select a resource in the same way he navigates the site normally, even when the number of resources is large.

Another advantage is security. If a page is visible according to the regular security rules, it is also selectable. Simple!

Disadvantages

I have to mention some disadvantages of the approach.

The first one is that every resource must be a web page, so it can be shown in an iframe. If the resource was e.g. an image or a downloadable document, we would have to use a different approach (actually we do use a different approach to select attachments).

A second disadvantage is that navigating the pages can be complicated, e.g. if the pages are long or complex. In this case, a tree-based “browse server” is simpler.

A third disadvantage is that a page with particular javascripts may misbehave inside the iframe.

Conclusions

This is a preview of one of the many improvements in the CMS area that we are preparing for the upcoming release 4.0.8 of Portofino. Stay tuned!