Tuesday July 29, 2014 - tags:    angular.js, sir-trevor

Hacking sir-trevor into an angular application

sir-trevor is a rich content editor entirely re-imagined for the web. It does not store html, just JSON and markdown; its clean and simple to use.


angular-sir-trevor allows you to inject sir-trevor into angular controllers and services


Run the following bower command to install

bower install angular-sir-trevor  

Now add angular-sir-trevor script to your html page


Now add the sirtrevor dependency to your main angular app file

angular.module('app', ['sirtrevor'])  


In order to use sir-trevor you can simply inject it in to your controllers; you also need to inject $window

.controller('MainCtrl', function ($window, sirtrevor) {

Now we have our dependencies injected we can go ahead and create a sirtrevor editor, and assign it to window.editor.

sir-trevor has some default properties we can set, so in order to support file uploads we set uploadUrl.

sir-trevor supports various blockTypes; so we specify which block types we want our editor to support.

 $scope.$on('$viewContentLoaded', function() {
    sirtrevor.DEBUG = false;
    sirtrevor.LANGUAGE = "en";

      uploadUrl: "/api/upload"

    $window.editor = new sirtrevor.Editor({
      el: $('.sir-trevor'),
      blockTypes: [

sir-trevor allows you to create custom block types which provides a nice extension mechanism.

Saving data

sir-trevor allows you to save data in the following format;

"list" [
  "content" : [ 
      "position" : 1,
      "type" : "heading",
      "data" : {
        "text" : "test heading"

In order to save sir-trevor blocks loop through each of the blocks in $window.editor.blocks, we can then store list to a database for example.

  $scope.onEdit = function() {
    $window.editor.dataStore.data = [];

    var list = [];

    $window.editor.blocks.forEach(function(block) {

        position: block.$el.index(), 
        type : block.blockStorage.type, 
        data :  block.blockStorage.data

      //save list here to somewhere..

retrieving data

In order to add items we have stored in a database to a content managed page; we loop though our list and call the $window.editor.createBlock function, we pass in the block.type and block.data in order to create the block.

list.forEach(function(block) {  
  $window.editor.createBlock(block.type, block.data);