Contenteditable vs input replacement

Question

i'm working on an app that will have a listing of the data you've saved previously. if you have a typo, didn't enter all the data points originally, etc. you'll have the opportunity to edit the data chunk.

right now i have javascript getting the values of each element (that was created via foreach loop in php with data from the server) within a given chunk, saving it to an object and then replacing those elements (<p>) with textarea inputs then filling it with the data from the js object that grabbed it previously.

for one i'm having issues with escaping quotes from the dynamic content but also it feels like this may not be the most elegant solution.

in comes contenteditable.

basically: should i go that route and just make each of the elements in the data chunk contenteditable='true' on click of 'edit' button or is that too fishy with browser support?

is my current course a solid plan?

or is there a third (fourth, fifth, etc.) option?

thanks!

Answer 1

Unless you specifically need the user to edit HTML content (or do complex syntax hilighting etc), go with input/textarea solution. Much cleaner, much more lightweight and easier to do. Contenteditable gets complicated really quickly and using something like tinyMCE or similar would probably be an overkill.

Answer 2

If you've used JSfiddle, you know how well contentedible works. That's what they use. You can use a jQuery plugin for the syntax highlighting if you need it (Snippet, jquery-syntaxhighlighter).