CODEWITHSUNDEEP
fabricjs
Eugene Vilder
Eugene Vilder

Reputation: 562

How to Insert Text in FabricJS v2?

The insertChars function doesn't exist anymore in version 2. Any idea how to insert text programmatically into the textbox element?

http://jsfiddle.net/redlive/jvuvm2qg/

var canvas = new fabric.Canvas('paper');
canvas.setHeight(300);
canvas.setWidth(500);

var text = new fabric.Textbox('Heo world', {
  left: 50,
  top: 10,
  fontFamily: 'arial',
  fill: '#333',
  fontSize: 50
});

canvas.add(text);

const style = {
	textBackgroundColor: 'red'
};

const chars = "ll", selectionStart = 2;

//Need help with the function, since it doesn't exists anymore
text.insertChars(chars, selectionStart, style);
//////////////////////////////////////////////////////////////

canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

Upvotes: 1

Views: 1694

Answers (1)

tetyanochka
tetyanochka

Reputation: 11

You can try to separate inserting and styling of chars like this:

text.insertChars(chars, null, selectionStart);

text.setSelectionStyles(style, selectionStart, selectionStart + chars.length);

http://jsfiddle.net/6wzLb2cL/

Upvotes: 1

Related Questions