Is there a way to apply the contenteditable attribute?


Ambassador
291 posts

Is there any way to apply the contenteditable attribute to a text element? I've tried to add an attribute for it but it says that it is reserved...

https://www.w3schools.com/tags/att_glob … itable.asp

Thanks!
Jeff
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://goo.gl/KJCsjA
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)


Registered User
407 posts
Online Now

If it is reserved you will have to probably set it with a simple jquery script

$('whatever').attr('contentEditable','true');


or this looks interesting...

https://plugins.jquery.com/smarttext/
Break on through to the other side
https://gluexp.coffeecup.com/index.html


Ambassador
291 posts

I'll look at that script, thanks. I was able to manually add it by just adding a html element but it would be nice to not have to do that.

If anyone knows of a script or plugin that will let you set some content to be editable but also let that update be server side so other people can then see the edits the user(s) has made. That's my end goal with all of this.

To achieve something like this where someone can add / change some text and other people visiting would see those changes.

https://i.imgur.com/W94yabG.png
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://goo.gl/KJCsjA
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)


Ambassador
291 posts

It could even be where a dialog box opens up when the user clicks on one of those fields. Inputs some text and clicks ok and then the field is updated with the new text. Not sure what I should be searching... my Google-fu is off right now! lol
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://goo.gl/KJCsjA
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)


Ambassador
291 posts

Alter Eagle wrote:
This might be what you are looking for Jeff?
Saving contenteditable Content Changes as JSON with Ajax

Thanks for that link!
That looks cool. I'm not sure if that saves the new text for all users or just saves it locally for the individual user? I'll have to look into it a bit more. From the comments it seems that people were having some issues with it.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://goo.gl/KJCsjA
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)


Registered User
407 posts
Online Now

If this will be for other users to see the edits you will need to start looking at logins, a database, and basically designing something like MediaWiki.

https://www.mediawiki.org/wiki/MediaWiki

Hopefully Coffeecup is working on a CMS.....for us in the future.

Break on through to the other side
https://gluexp.coffeecup.com/index.html


Ambassador
291 posts

I'm not sure if a full CMS is a little more than I need for this. But maybe it is what I need.

Basically I'm trying to recreate a site like this one:
http://clashcaller.com/war/u7tft

If you go to that page you can add names and edit the ones that are there currently. I don't need all the other features but just the ability for a user to update some text fields. Maybe that site is using a CMS but I think it's just using jquery to get it done.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://goo.gl/KJCsjA
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)


Registered User
407 posts
Online Now

To me the link you provided looks like a form that gets posted to the server and one can come back to and update.
Break on through to the other side
https://gluexp.coffeecup.com/index.html


Ambassador
291 posts

Yeah, I think that's it. Not sure how to replicate that. I'll keep on googling on the topic and report back if I find anything.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://goo.gl/KJCsjA
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.