I want the user to be able to select a fabric.Textbox and do the rotation, move, resizing etc but not the editing of the text. To edit the text the user must select the textbox object and then activate the textediting (not in fabric). So what I want is to avoid that the user can edit the text in fabric (like fabric.Text). Is there any way to do this?
canvas = new fabric.Canvas('canvas');
var shape = new fabric.Textbox('I am a not editable textbox', {width: 200, top:0, left:0, editable: false, cursorWidth: 0});
canvas.add(shape);
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>
Fabric.js Textbox subclasses IText. From the IText documentation you can see:
/**
* Indicates whether a text can be edited
* @type Boolean
* @default
*/
editable: true,
Why the cursors still appear is a mystery to me. So I applied a cursorWidth = 0 to temporarily patch the problem. It is probably an issue with the library itself.
var textboxObj = new fabric.Textbox(selectValue, {
fontSize: 24,
originX: 'center',
originY: 'center',
top: center.top,
left: center.left,
editable: false,
});
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