Editr HTML, CSS, JS Playground for Drupal

Submitted by swim on Thu, 09/05/2013 - 03:57

Editr is an online code playground editor built with ace.js by Idered (Kasper Mikiewicz). Editr is a fantastic way to demonstrate code providing syntax highlighting, code tips & previews. Further Editr can be hosted locally allowing easy extension. Integrating Editr into Drupal was tedious at first with the jQuery requirements set fairly high; thank you maintainers of the jQuery update module, your awesome. As it stands this is only a proof of concept and should not be used on a live production site etc.


The module uses a text formatter to allow easy implementation. Simply include your project(s) within the items folder as such, sites\all\modules\editr\includes\editr\items\{project-name}

Essentially it's like any other text formatter however we apply additional parsing to the passed tokens.

 *  Parse token params.
function _editr_parse_token_params($tokens) {
  $params = explode(':', $tokens);
  foreach ($params as $key => $param) {
    if ($key & 1) {
      $end['values'][] = $param;
    else {
      $end['keys'][] = $param;
  $param_array = array_combine($end['keys'], $end['values']);

  return $param_array;

The example below demonstrates the syntax used to include Editr, [editr:path:{FOLDER-NAME}:file:{LIST-OF-FILES}]. I believe this syntax provides a simple & fairly elegant way to include multiple files. Paths can also be used with files as such, [editr:path:{FOLDER-NAME}:file:{main.html;CSS/main.css;CSS/960.css}], CSS being the parent folder for both main.css & 960.css.

The example below would be located, sites\all\modules\editr\includes\editr\items\game-pairs. With the files located relatively; sites\all\modules\editr\includes\editr\items\game-pairs\main.html & sites\all\modules\editr\includes\editr\items\game-pairs\main.css etc