Templates

CKFinder modules use the doT.js template engine for constructing templates (used by views), which are used for rendering different parts of the user interface.

Related Events

CKFinder fires two events that give access to templates, providing the possibility to override them:

• The template event can be used to discover all template names.
• The template:NAME event can be used to hook into a particular template.

Variables in Templates

A template has access to the model (additional data passed to the view) by accessing the it variable.

Example

The CustomPage plugin provides a view where the template uses the it.template variable:

var MyViewClass = Marionette.ItemView.extend( {
    template: doT.template( '<h2>{{=it.title}}</h2><button data-inline="true">Back to CKFinder</button>' ),
} );

// Create a View instance to be rendered in our page.
var myView = new MyViewClass( {
    model: new Backbone.Model( { title: 'My own page' } )
} );

Built-in Templates

Templates used by CKFinder have access to different variables, depending on a particular view. The easiest way to learn which templates are used by CKFinder to render the interface and which variables are used is to listen to the template event and analyse evt.data.

By default all built-in templates also have access to the finder.config and finder.lang properties as variables it.config and it.lang. If you would like to access them in a custom view, make sure to pass them to the model.

var MyViewClass = Marionette.ItemView.extend( {
    template: doT.template( '{{ if( it.config.readOnly ) { }}Read-only mode{{ } else { }}Normal mode{{ } }}' ),
} );

var myView = new MyViewClass( {
    model: new Backbone.Model( { config: finder.config } )
} );

Examples

See the CustomPage, CustomPanel and FolderInfo plugins for complete examples of plugins that provide custom views with templates.

See the ACLInfo and AlterDialogWindow plugins for complete examples of plugins that add additional information to default CKFinder templates.