CODEWITHSUNDEEP
htmlcontenteditable
Ortund
Ortund

Reputation: 8245

Contenteditable practical use

I've just found out about the contenteditable attribute and I was thinking about practical uses for it.

I think it would be awesome for quick updates to a page, but there are some concerns such as:

I love this idea of quickly editing the page's content right where you're going to see it. I'm pretty excited about implementing such a thing on my website, but I could use a bit of guidance before attempting it.

Can anyone address the above listed issues as well as anything I haven't considered that might be pertinent?

Thanks for your time!

Upvotes: 3

Views: 1885

Answers (2)

bcag2
bcag2

Reputation: 2439

A use case is fonts website promotion.

I discovered this attribute on https://www.luciole-vision.com/luciole-en.html#try where you can change text and see your text with this font.

Upvotes: 0

robertc
robertc

Reputation: 75707

  • Security Yes, you don't want just anyone to update your page, but that's not anything to do with contenteditable itself. People can change the content of any page on the internet right now using the browser's development tools but, other than faking funny screenshots, it's not much use to them if the server doesn't accept updates. The more important issue here is protecting against things like cross-site scripting attacks by making sure the content the user adds to the page is 'safe' (this, for example, is why blogs typically disallow most HTML tags in comments).
  • Making content editable after login Simply add the contenteditable attribute in the server side logic after the user has logged in. Alternatively, add it with JavaScript when the user clicks an 'Edit' button. I wouldn't expect it to change the whole page's markup because for this approach to be sensible the pages would already be getting generated at the server side anyway from a template being filled with content stored in a database. If you're talking about making a static site editable then, yes, you'd have a lot of work to do, but you'd have that work to do however you planned on letting people edit the pages.
  • Saving the new content Yes, do it with Ajax. JSON is not really necessary, it's the HTML content you want to send back, right? Send it back as HTML, just bear in mind the above comment about cross-site scripting and do security checks on the server side (never trust user input). How you confirm the user is done editing is up to you, in the same way that you're going to have to add programming logic to send the changes back with Ajax and process those changes on the server, you're going to have to add logic which shows editing tools (buttons for bold, italic etc.) when necessary - add a button to perform the update at the same time.

Upvotes: 3

Related Questions