Jump to content

Front-end inline editing, so close...I think.

Danjuan09

By Danjuan09,
in API & Templates

 Share

Recommended Posts

Danjuan09 Newbie

Danjuan09

Posted
Posted

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

Link to comment
Share on other sites
adrian Hero Member

adrian

Posted
Posted

I haven't read through your code yet, but have you seen this module: http://modules.processwire.com/modules/inline-editor/

It is listed as proof of concept, but it might work for you, or help you solve the problems with your code.

There is of course also Fredi: http://modules.processwire.com/modules/fredi/ and AdminBar: http://modules.processwire.com/modules/admin-bar/ - even though they are not inline, they do make front-end editing easy.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...