Search the Community
Showing results for tags 'inline edit'.
Found 1 result
-
Hey guys I'm developing my first template. I'm trying to get front-end inline editing so that when I am logged in as a superuser I am able to edit the text without having to go into the backend. Ideally I just want to change the text, no styling, arrangement etc, just the text. Please see attached what I currently have, it's very basic but if I add contenteditable="true", this allows me to edit the text as described. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <style> * { padding:0; margin:0; } html { width:100%; } body { width:100%; } .edit-toolbar { height:40px; width:100%; background:red; } .edit-toolbar button { height:30px; width:50px; background:white; } .editable{ background:#EAEAEA} </style> </head> <body> <div id="welcomeDiv" class="edit-toolbar" style="display:none;"> <input type="button" id="save" value="save"/> <input type="button" id="cancel" value="cancel"/> </div> <?php if(wire('user')->hasRole('superuser')) echo' <input type="button" id="btn" name="answer" value="Edit"/> '; ?> <div id="container"> <?=$page->headline;?> </div> <script> $('#btn').click(function(){ $('#welcomeDiv').show(); $('#container').attr('contenteditable','true'); }) $('#save').click(function(){ $('#welcomeDiv').hide(); $('#container').attr('contenteditable','false'); }) $('#cancel').click(function(){ $('#welcomeDiv').hide(); $('#container').attr('contenteditable','false'); }) </script> </body> </html> I now need to add a few features. 1: An edit button (only show the edit button if logged in as a superuser), once this is clicked, it will add contenteditable="true" to the container div and show a toolbar with a further 2 buttons, 'save' and 'cancel'. When cancel or saved are clicked the toolbar will hide and contenteditable="true" will change to false. I have achieved this with the following code <div id="welcomeDiv" class="edit-toolbar" style="display:none;"> <input type="button" id="save" value="save"/> <input type="button" id="cancel" value="cancel"/> </div> <?php if(wire('user')->hasRole('superuser')) echo' <input type="button" id="btn" name="answer" value="Edit"/> '; ?> <script> $('#btn').click(function(){ $('#welcomeDiv').show(); $('#container').attr('contenteditable','true'); }) $('#save').click(function(){ $('#welcomeDiv').hide(); $('#container').attr('contenteditable','false'); }) $('#cancel').click(function(){ $('#welcomeDiv').hide(); $('#container').attr('contenteditable','false'); }) </script> 2: The following feature must only be accessible if the user is logged in as a superuser. I believe I have sorted this with the above code. 3: I need to be able to save the content replacing the current text, so that when I go back into the backend, the text is the new text I replaced, also if the cancel button is clicked, the text needs to revert back to the original text not what was just written. As far as i'm aware, number 3 is all I need help with unless anyone spots an error. Thanks
