highlight spans

highlight spans

by Abhishek Nandgaonkar

HTML

<div contenteditable="true">say <img class="self-closing-tag"...

CSS

.annotated-read-only {
  background: #FFFF99;
  border-width: 0.5px;
  border-color: black;
  border-style: dashed;
  padding: 2px
}

.annotated-editable {
  background: #FFFF99;
  border-width: 0.5px;
  border-color: black;
  border-style: solid;
  padding: 2px
}

.annotated-focus {
  background: #FFFF99;
  border-width: 0.5px;
  border-color: red;
  border-style: solid;
  padding: 2px
}

JavaScript

$('.self-closing-tag').bind('contextmenu', function(e) {
    alert('Invoke tag editor for self-closing tag.');
    return false;
});

$('.annotated-read-only').bind('contextmenu', function(e) {
    //e.target.addClass('annotated-editable')
    alert('Invoke tag editor for enclosing tag.');
    return false;
});