Join Joseph Lowery for an in-depth discussion in this video Making content editable, part of HTML5 Projects: Advanced To-Do List.
Do you know how many times I've stared at a web page and thought, boy, I wish I could …change that? And did you know that with HTML5 any portion of a web page can be made editable …with literally a single word, and that word is contenteditable. …We'll apply it to our basic to- do list to get the ball rolling. …So I am going to go to my Code Editor and scroll down to around line 38 or so, where …I have the div with an ID of container, and an unordered list with the ID of the list, …and my initial entry Enjoy Life.…
So all I need to do here in order to make all the items in the unordered list editable …is to put in that one attribute and we're going to put it right in the ul tag there, …and it is contenteditable. …Believe it or not, that's it. Let's save the page and try it out. …So I'll go back to the browser, click Refresh, and let's just scroll down a little bit. …So now I should be able to just click right in here and let's go ahead and get rid of …this placeholder entry here, and I'll put in my own list; quick shopping list of milk, …
- Making content editable
- Saving edits
- Setting up the core files for your app
- Removing list items
- Enabling drag-and-drop sorting