fabric.js get “edit” state of IText object

In fabric.js I want to add some key interaction on my canvas. If an IText object is selected I want it to be deleted if I hit the “del” key. I accomplished this by:

$('html').keyup(function(e){
  if (e.keyCode == 46) {
    obj = canvas.getActiveObject();
    canvas.remove(obj);
  }
});

Now the problem is that when I am in the middle of editing the IText and hit the DEL key, the object is obviously also removed.
I want to prevent this by something like this:

  • how to create canvas boundary limit which scales when zoomed? (fabric.js)
  • Fabric js clip object to background image
  • Angular.js and Fabric.js: Fabric canvas changes behavior once code is moved to a Angular Directive
  • fabric.js moving an object underneath another object
  • Scaling image from the center (fabricjs)
  • Fabric js moving image with keyboard
  • $('html').keyup(function(e){
    
      canvas.observe('text:editing:entered', editing = true);
    
      console.log(editing);
    
      if (editing == false) {
        if (e.keyCode == 46) {
          removeObject();
        }
      };
    
    });
    

    = only remove the object if I am not in the middle of editing the IText

    I found this fire event “editing:entered” here: http://fabricjs.com/docs/fabric.IText.html
    So I try to catch this with the above code. However, it looks like this event already fires when I select the text and did not really start to edit it.

    Any ideas how to solve this and check if I am really just editing the IText?

  • Issue with mirror image clone object position using fabric.js
  • How to add outline to the active text in Fabric.js
  • How to upload an image to a canvas with Fabric.js?
  • How can I disable scaling points of canvas elements using fabric.js?
  • How do we limit the maximum width and height of a canvas object in Fabric.js
  • prevent click and drag multi selection in fabricjs
  • One Solution collect form web for “fabric.js get “edit” state of IText object”

    IText object has a property called isEditing which can be used to check if text in the object is being edited or not.

    To achieve what you said, all you have to do is check this property before removing the object from the canvas. The code looks like this:

    document.onkeyup = function (e) {
        if (e.keyCode == 46) {
            obj = canvas.getActiveObject();
            if (!obj.isEditing) {
                canvas.remove(obj);
            }
        }
    };
    

    Here’s the fiddle : http://jsfiddle.net/bdgnrnxf/1/ and link to the documentation.