Search code examples
htmlhtml5-canvasfabricjs

How to activate the cursor for a fabric js IText?


I'd like to be able to add text to the canvas and have it go directly into editing text mode where the cursor is visible and you can start typing.

So far I've got this code that adds the text and sets it as active, but I'm not sure on how to go to the edit text mode. Any ideas? Thanks!

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

  _fabicCanvas.setActiveObject(fabicText);

Solution

  • You have to use enterEditing() method and then set focus on 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>