How to activate cursor for js IText fabric?

I would like to be able to add text to the canvas and go directly to editing the text mode, where the cursor is visible, and you can start typing.

So far I have this code that adds text and sets it as active, but I'm not sure how to go into text editing mode. Any ideas? Thank!

    var fabicText = new fabric.IText('Click to change Text', { left: 100, top: 100 });
   fabicText.set({ fill: getSelectedColorText() });
   _fabicCanvas.add(fabicText);

  _fabicCanvas.setActiveObject(fabicText);
+4
source share
1 answer

You should use a method enterEditing()and then set focus to hiddenTextArea like this

fabicText.enterEditing();
fabicText.hiddenTextarea.focus();

var _fabicCanvas;

$(function () {
    _fabicCanvas = window._canvas = new fabric.Canvas('canvas');
    var fabicText = new fabric.IText('Click to change Text', {
        left: 100,
        top: 100
    });
    _fabicCanvas.add(fabicText);
    fabicText.set({ fill: 'blue' });
    _fabicCanvas.setActiveObject(fabicText);
    fabicText.enterEditing()
    fabicText.hiddenTextarea.focus();

});
<script src="https://rawgit.com/kangax/fabric.js/v1.4.5/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400" class="canvas"></canvas>
Run code
+14
source

All Articles