When creating a plugin, you'll often include css and/or javascript to make it function properly. There are a number of options for how to do this which we'll explain and show example of below.

Add With Addon.ini

It is possible to add elements to the <head>...</head> portion of Typesetter pages with nothing more than a line or two of code in the Addon.ini file of your plugin.

html_head = '<link rel="stylesheet" href="{$addonRelativeCode}/style.css" type="text/css" />';
This line of code will add a link for the style.css file of your plugin to all Typesetter pages.


Note the use of {$addonRelativeCode}. This is one of a few variables available in the Addon.ini file.

Add to Combine.php

To make Typesetter pages load faster, javascript and css files are combined into two compressed files before being sent to the user. Your plugin can add files to these compressed files in a number of ways.


For a plugin to add css and js files to the combined and compressed files, it needs to add an entry to the $page->css_admin, $page->css_user or $page->head_js arrays. This can be done in a number of ways and below is an example of how to do so using the GetHead hook. (The GetHead hook will be available in 2.0b3.)


script = script.php
method = plugin_function



function plugin_function($js_files){
	global $addonRelativeCode,$page;
	$page->head_js[] = $addonRelativeCode.'/javascript.js';

Because gadgets are often called after the <head> section of a page is generated, the GetHead hook is the best way to add javascript and css files to the combined outputs.


$page->css_admin vs $page->css_user The only difference between $page->css_admin or $page->css_user is the order in which they are used. CSS files in the $page->css_user array will be loaded before other Typesetter specific css files including the css file for the current theme. CSS files in the $page->css_admin array are loaded last giving the css rules in these files higher importance in the document. If you're not sure which one to use, start with $page->css_user, it's very easy to change it down the road.


JS Events

  • editor:loaded
/* example how to use the 'editor:loaded' event */

$(document).on('editor:loaded', function(evt, data){

console.log('editor:loaded triggered');

console.log('evt = ', evt);

console.log('data = ', data);

  • editor_area:loaded 
  • admin: +event.type
  • gp_gallery_add
  • gp_position
  • section_clipboard:loaded
  • section_sorting:loaded
  • section_options:loaded
  • section_options:closed
  • SectionAdded
  • SectionSorted
  • SectionRemoved
  • SectionCopied
  • PreviewAdded
  • PreviewRemoved


elFinder 2.1.50 in Upcoming Release

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

Log In