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);
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With