Editor Text Fabricjs - IText format letters and si

2019-05-07 16:46发布

问题:

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();
    }
}