An example of registering an 'img' entity that modifies itself on click or shift-click (see onclick handler).

entity-modification.js

   firepad.registerEntity('img', {
      render: function(info, handle) {
        var attrs = ['src', 'alt', 'width', 'height', 'style', 'class'];
        var html = '<img ';
        for(var i = 0; i < attrs.length; i++) {
          var attr = attrs[i];
          if (attr in info) {
            html += ' ' + attr + '="' + info[attr] + '"';
          }
        }
        html += ">";
        var div = document.createElement('div');
        div.innerHTML = html;
        var img = div.childNodes[0];
        img.onclick = function(e) {
          if (e.shiftKey) {
            // move the image one character to the right.
            var location = handle.find();
            handle.remove();
            firepad.insertEntityAt(location+1, 'img', info);
          } else {
            // double the width of the img.
            info.width *= 2;
            handle.replace(info);
          }
        }
        return img;
      },
      fromElement: function(element) {
        var info = {};
        for(var i = 0; i < attrs.length; i++) {
          var attr = attrs[i];
          if (element.hasAttribute(attr)) {
            info[attr] = element.getAttribute(attr);
          }
        }
        return info;
      }
    });