Redacting Tool

by Marventus

HTML

<input id="switch" type="button" />
<br/>
<p id="p1">This is a [spoiler]paragraph that overflows[/spoiler] by a lot, yes, a lot, into the [spoiler]next line[/spoiler]. I said it overflows, god damn it, so you better start [spoiler]overflowing[/spoiler]</p>

[spoiler]<p id="p2">This is a paragraph that overflows by a lot, yes, a lot, into the next line. I said it overflows, god damn it, so you better start overflowing!</p>[/spoiler]

<p id="p3">[spoiler]This is a paragraph that overflows by a lot, yes, a lot, into the next line. I said it overflows, god damn it, so you better start overflowing! And here is a <a href="http://www.thegeekinvasion.com" title="TGI" target="_new">link</a>.[/spoiler]</p>

[spoiler]<p id="p4">This is a paragraph that overflows by a lot, yes, a lot, into the next line. I said it overflows, god damn it, so you better start overflowing! And here is a <a href="http://www.thegeekinvasion.com" title="TGI" target="_new">link</a>.</p>[/spoiler]


<p><a href="http://thegeekinvasion.com/newblog/wp-content/uploads/2014/02/shop.png" rel="lightbox[3519]"><img class="size-full wp-image-3432 alignleft" alt="" src="http://thegeekinvasion.com/newblog/wp-content/uploads/2014/02/shop.png" width="167" height="43" /></a></p>
<br/>
<div id="attachment_3432" class="wp-caption alignleft"><a href="http://thegeekinvasion.com/newblog/wp-content/uploads/2014/02/shop.png" rel="lightbox[3519]"><img class="size-full wp-image-3432 " alt="This is a caption" src="http://thegeekinvasion.com/newblog/wp-content/uploads/2014/02/shop.png" width="167" height="43" /></a><p class="wp-caption-text">This is a caption</p></div>

CSS

input {
    cursor: pointer;
    padding: 5px 10px;
}
p {
    font: 20px Arial, Helvetica, sans-serif;
}
#p1, #p1 a {
    color: #777;
}
#p2, #p2 a {
    color: #2CAE85;
}
#p3, #p3 a {
    color: rgb(255,80,80);
}
#p4, #p4 a {
    color: #57f;
}
.spoiler.on {
    cursor: pointer;
}
.wp-caption {
    background-color: #eee;
    border-radius: 5px;
}
.wp-caption p {
    border-radius: 0 0 5px 5px;
    color: #666;
    font-size: 12px;
    padding-left: 10px;
    text-transform: uppercase;
}

JavaScript

jQuery(function($) {
    var ClickFn = function(event) {
            var obj1 = event.data.obj,
                col1 = event.data.col
            ;
            if( obj1.hasClass("spoiler-off") ) {
                SpoilOn(obj1, col1);
                obj1
                    .removeClass("spoiler-off")
                    .attr( "title", obj1.attr("title").replace("hide", "show") )
                    .trigger("mouseover")
                ;
            } else {
                obj1
                    .addClass("spoiler-off")
                    .attr( "title", obj1.attr("title").replace("show", "hide") )
                ;
                SpoilOff(obj1, col1);
            }
        },
        matchColor = function(bcol, col) {
            var bcolO = bcol.replace(")", "").split("("),
                bcolOC = bcolO[1].split(","),       
                out = bcol.replace("rgb", "rgba").replace(")", ", 0.9)"),
                opac
            ;
            return out;
        },
        OverFn = function(event) {
            var obj2 = event.data.obj;
            if( obj2.css("color") === obj2.css("background-color") ) {
                bcolor = matchColor(obj2.css("background-color"), event.data.col);
                obj2.css("background-color", bcolor);
            }
        },
        OutFn = function(event) {
            event.data.obj.css("background-color", event.data.col);
        },
        SpoilInit = function(mode) {
            var col;
            if( mode === "on" ) {
                $(".spoiler").each(function() {
                    col = $(this).css("color");
                    SpoilOn( $(this), col );
                    $(this)
                        .on( "click", {obj:$(this), col:col}, ClickFn )
                        .attr("title", "Click to show content!")
                        .addClass("on")
                    ;
                });
                $("#switch")
                    .addClass("on")
                    .attr("value",...