https://jsfiddle.net/gislef/Lvfpq57h/
To make this editor I took as a basis the kitchensink text editor, I consulted the fabric js documentation about IText and saw some isolated examples in Jsfiddle.
I have two questions:
How do I select letters and format only that was selected within the text?
How do I get to select the three options simultaneously the text decoration: underline, line-through and overline?
Current code:
radios5 = document.getElementsByName("fonttype"); // wijzig naar button
for(var i = 0, max = radios5.length; i < max; i++) {
radios5[i].onclick = function() {
if(document.getElementById(this.id).checked == true) {
if(this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "bold");
}
if(this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "italic");
}
if(this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "underline");
}
if(this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "line-through");
}
if(this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "overline");
}
} else {
if(this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "");
}
if(this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "");
}
if(this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "");
}
if(this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "");
}
if(this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "");
}
}
canvas.renderAll();
}
}