ui1.editor

Experimental implementation of a WYSIWYG text editor supporting features like numbered lists, unnumbered lists, definition lists, text decoration, ...

var div = new innovaphone.ui1.Div("position:absolute; left:0px; right:0px; top:0px; bottom:0px");
out.appendChild(div.container);
var bold = div.add(new innovaphone.ui1.Div("position:absolute; left:30px; top:5px; cursor:pointer; font:bold 20px Times New Roman","B")).addEvent("click", function(e) { editor.selection("B"); e.stopPropagation() } ).addEvent("mousedown", function(e) { e.preventDefault() } );
var italic = div.add(new innovaphone.ui1.Div("position:absolute; left:50px; top:5px; cursor:pointer; font:italic 20px Times New Roman","I")).addEvent("click", function(e) { editor.selection("I"); e.stopPropagation() } ).addEvent("mousedown", function(e) { e.preventDefault() } );
var underline = div.add(new innovaphone.ui1.Div("position:absolute; left:70px; top:5px; cursor:pointer; text-decoration: underline; font:normal 20px Times New Roman","U")).addEvent("click", function(e) { editor.selection("U"); e.stopPropagation() } ).addEvent("mousedown", function(e) { e.preventDefault() } );

var ul = div.add(new innovaphone.ui1.Div("position:absolute; left:100px; top:5px; cursor:pointer; font-size:20px", "ul")).addEvent("click", function(e) { editor.l("UL") }).addEvent("mousedown", function(e) { e.preventDefault() } );
var ol = div.add(new innovaphone.ui1.Div("position:absolute; left:120px; top:5px; cursor:pointer; font-size:20px", "ol")).addEvent("click", function(e) { editor.l("OL") }).addEvent("mousedown", function(e) { e.preventDefault() } );
var dl = div.add(new innovaphone.ui1.Div("position:absolute; left:140px; top:5px; cursor:pointer; font-size:20px", "dl")).addEvent("click", function(e) { editor.dl() }).addEvent("mousedown", function(e) { e.preventDefault() } );
var indent = div.add(new innovaphone.ui1.Div("position:absolute; left:160px; top:5px; cursor:pointer; font-size:20px", ">")).addEvent("click", function(e) { editor.indent() }).addEvent("mousedown", function(e) { e.preventDefault() } );
var unindent = div.add(new innovaphone.ui1.Div("position:absolute; left:180px; top:5px; cursor:pointer; font-size:20px", "<")).addEvent("click", function(e) { editor.unIndent() }).addEvent("mousedown", function(e) { e.preventDefault() } );

var editor = div.add(new innovaphone.ui1.Editor("position:absolute; left:30px; top:30px; width:300px; height:200px; border: 1px solid black; background-color:white", 9, "red", "min-height:20px", null, null, null, null, onemphasis));
function onemphasis(b, i, u, l) {
    bold.container.style.color = (b? "red" : "black");
    italic.container.style.color = (i? "red" : "black");
    underline.container.style.color = (u? "red" : "black");
    ul.container.style.color = l == "UL"? "red" : "black";
    ol.container.style.color = l == "OL"? "red" : "black";
    dl.container.style.color = (l == "DL" || l == "DT" || l == "DD")? "red" : "black";
}