 |
Archived Repository This code is no longer maintained. Feel free to fork it, but use it at your own risks. |
Inline text editing tool for Raphaël 2.0 & compatible with Raphaël Free transform. Supports SVG text elements with any type of transformation (scale, rotate, translate, matrix).
Licensed under the MIT license.
var paper = Raphael(document.getElementById('container'), 740, 540);
var text = paper.text(250, 250, 'Hello').attr({'text-anchor': 'start', 'font-size': '25px'}).transform(['T', 242, -174, 'R', 36.9973, 'S', 2.0631, 1]);
// Initialize text editing for the text element
paper.inlineTextEditing(text);
// Start inline editing on click
text.click(function(){
// Retrieve created <input type=text> field
var input = this.inlineTextEditing.startEditing();
input.addEventListener("blur", function(e){
// Stop inline editing after blur on the text field
text.inlineTextEditing.stopEditing();
}, true);
});Hide initialized text and add HTML input text at the same position.
Returns this text field.
Remove the text field added with startEditing() and apply text modifications.
- Fix long text positionning when scaled
- Allow webfonts