Skip to content

Instantly share code, notes, and snippets.

@mikelehen
Created September 28, 2013 23:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mikelehen/6747621 to your computer and use it in GitHub Desktop.
Save mikelehen/6747621 to your computer and use it in GitHub Desktop.
An example of registering an 'img' entity that modifies itself on click or shift-click (see onclick handler).
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;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment