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

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

Install

Run the following bower command to install

bower install angular-sir-trevor  

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

bower_components/angular-sir-trevor-js/angular-sir-trevor.js  

Now add the sirtrevor dependency to your main angular app file

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

Usage

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

angular.module('app')  
.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";

    sirtrevor.setDefaults({
      uploadUrl: "/api/upload"
    });

    $window.editor = new sirtrevor.Editor({
      el: $('.sir-trevor'),
      blockTypes: [
        "Heading",
        "Text",
        "List",
        "Quote",
        "Image",
        "Video",
        "Tweet"
      ]
    });
 });

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) {
      $window.editor.saveBlockStateToStore(block);

      list.push({
        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);
});