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