Skip to content
This repository has been archived by the owner on Nov 8, 2017. It is now read-only.

Use contentEditable to implement SVG text tool #12

Open
jarek-foksa opened this issue Jan 25, 2014 · 1 comment
Open

Use contentEditable to implement SVG text tool #12

jarek-foksa opened this issue Jan 25, 2014 · 1 comment

Comments

@jarek-foksa
Copy link

geometry/text-editable.coffee is implementing on-canvas text editing by overlying SVG <text> element with editable HTML <div> element and applying similar styles on it. I have figured out an easier way to have editable SVG text:

  • when user clicks on SVG <text> element set contenteditable attribute on the nearest ancestor in HTML namespace to true (e.g. document.body.contentEditable = true;)
  • make the SVG <text> element selectable (e.g. svgTextElement.style.webkitUserSelect = 'text';)
  • when user finishes editing the text (e.g. by clicking on canvas) set the contentEditable attribute on the ancestor back to false

In the near future this hack won't be needed at all since SVG 2 SVGTextElement would be inheriting from HTMLElement interface which implements contentEditable functionality [1].

[1] http://dev.w3.org/SVG/proposals/improving-svg-dom/#interface-hierarchy

@artursapek
Copy link
Owner

I was unaware of the future changes to inheritance. That's awesome to know.

This sounds like a good idea. I'd love to see this implemented on a branch so I've labeled this as an enhancement for people who are looking to contirbute.

The text tool is probably the one I'm least confident in right now to be honest. Thanks for the suggestion.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants