editable Text option in kinetic js

Question

I want to add Textbox or editable element to give the user the option to edit the text.

This is my current code:

var text = new Kinetic.Text({
        text: "Sample Text", ---> i want to edit this text 
        x: 50,
        y: 10,
        fill: "transparent",
        fontSize: 10,
        fontFamily: "Helvetica Neue",
        textFill: "#000",
        align: "center",
        verticalAlign: "middle",
        name:'TEXT'
    });

Answer 1

At the moment there does not seem to be any way to create editable text with Kinetic JS (see several threads about this at stackoverflow), some people suggest using an input field next to the canvas to edit the text, but my solution would be the following:

• create a text with your code
• on text click [text.on("click", function...], create an input field right at your mouse cursor

Well, that´s the plan. Maybe it´s easier to use a "save" button text to the input field, so you know exactly when to close it and when to store the input field data to the Kinetic text. you would also need a "close" function if you don´t want to edit it.

A very easy solution would also be a simple JavaScript prompt:

var xy = prompt("gimme your text");

So, something like this would be the best Solution imho:

myText.on('click', function(evt) {
    this.setText(prompt('New Text:'));
    layer.draw(); //redraw the layer containing the textfield
});

Answer 2

I've made an attempt for an actual KinetiJS plugin with editable text functionality.

I know it's reinventing the wheel, when you can just hover a textarea, but why not have it only in canvas too.

Check the plugin out at: https://github.com/nktsitas/kineticjs-editable-text