Mosaico Plugins

Mosaico currently supports 2 types of plugins: widget plugins and viewModel plugins. Also, it supports "init"/"dispose" lifecycle "plugins.

A plugin is an object (or a function) that you can pass to Mosaico.init or to Mosaico.start.

viewModel plugins

A viewModel plugin exists in 2 forms: function(viewModel) { ... return { init: function(), dispose: function() } or { viewModel: function(viewModel) {}, init: function(), dispose: function() }. In all forms init/dispose are optionals.

The simpler plugin is the plugin that expose mosaico viewModel to the window:

function(viewModel) { window.viewModel = viewModel }

You may want to start adding this one when you develop and this way you can have a look at the "viewModel" core object using your browser console.

Let's say you want to override the way Mosaico deals with translations, you can override the "viewModel.t" method.

function(viewModel) { viewModel.t = function() { return 'FOO' } }

This plugin will replace every UI string with "FOO".

app.js:initFromLocalStorage (https://github.com/voidlabs/mosaico/blob/master/src/js/app.js#L105) is a function that could have been written outside from mosaico that simply instantiate a plugin (the localstorage plugin) and calls Mosaico.start passing this plugin.

widget plugins

A widget plugin is something new that you can use to provide custom property editor to mosaico.

var mosaicoWidgetPlugin = {
    widget: function($, ko, kojqui) {
      return {
        widget: 'mypropertytype',
        parameters: { param: true },
        html: function(propAccessor, onfocusbinding, parameters) {
          return '<input size="7" type="text" data-bind="value: ' + propAccessor + ', ' + onfocusbinding + '" />';
        }
      };
    },
    viewModel: function(vm) {
      // of course you can also define helper functions in the viewModel (you can access them in the widget code as $root.function()
    }
  };