Я хочу, чтобы администраторы моего веб-сайта могли изменять текст некоторых страниц. Использование contentediteble было бы идеально для меня.
Проблема в том, что я знаю, как программировать на PHP. Я искал в Интернете часами, пытаясь заставить его работать для меня, но я просто не понимаю языки программирования, используемые для хранения данных, достаточных для того, чтобы они работали.
Вот как я хотел бы, чтобы он работал:
1. Администратор нажимает кнопку 'edit'
2. div становится редактируемым.
3. Когда администратор готов к редактированию, он нажимает кнопку «сохранить»,
4. Данные сохраняются в файл или базу данных (не знаю, какой будет лучший вариант).
5. Измененный контент отображается при открытии страницы.
Это все, что у меня есть сейчас:
<div class='big_wrapper' contenteditable> PAGE CONTENT </div> Я знаю, как сделать часть с преобразованием div в contenteditable div, когда admin нажимает «редактировать».
Моя проблема в том, что я действительно не знаю, как сохранить отредактированные данные.
Я также не знаю, будет ли сложно извлечь данные из файла, а также о том, как сохранить данные. Если он будет сохранен в базе данных, у меня не возникнет проблем с его извлечением, но я не знаю, возможно ли это, и если это лучший вариант.
Спасибо за вашу помощь,
Самуил
РЕДАКТИРОВАТЬ:
@gibberish, большое вам спасибо за ваш быстрый ответ!
Я пытался заставить его работать, но он пока не работает. Я не могу понять, что я делаю неправильно.
Вот мой код:
over_ons.php :
<div class='big_wrapper' contenteditable> PAGE CONTENT </div> <input type='button' value='Send Data' id='mybutt'> <script type="text/javascript"> $('#mybutt').click(function(){ var myTxt = $('.big_wrapper').html(); $.ajax({ type: 'post', url: 'sent_data.php', data: 'varname=' +myTxt+ '&anothervar=' +moreTxt }); }); </script>
sent_data.php :
<?php session_start(); include_once('./main.php'); include($main .'connectie.php'); $tekst=$_POST['myTxt']; $query="UPDATE paginas SET inhoud='" .$tekst. "' WHERE id='1'"; mysql_query($query); ?>
Еще раз спасибо за вашу большую помощь!
Можете ли вы также помочь мне сделать div редактируемым только тогда, когда пользователь нажимает кнопку?
РЕШЕНИЕ :
Мне потребовалось более 2 недель, чтобы, наконец, сделать работу. Мне пришлось изучить javascript, jQuery и Ajax. Но теперь он работает безупречно. Я даже добавил некоторые дополнения для причудливости 🙂
Я хотел бы поделиться, как я это сделал, если кто-то хочет сделать то же самое.
over_ons.php :
//Active page: $pagina = 'over_ons'; ?> <input type='hidden' id='pagina' value='<?php echo $pagina; ?>'> <!--Show active page to javascript--><?php //Active user: if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin'){ $editor = $_SESSION['gebruikersnaam']; ?> <input type='hidden' id='editor' value='<?php echo $editor; ?>'> <!--Show active user to javascript--><?php } ?> <!--Editable DIV: --> <div class='big_wrapper' id='editable'> <?php //Get eddited page content from the database $query=mysql_query("SELECT inhoud FROM paginas WHERE naam_pagina='" .$pagina. "'"); while($inhoud_test=mysql_fetch_array($query)){ $inhoud=$inhoud_test[0]; } //Show content echo $inhoud; ?> </div> <!--Show edit button--> <?php if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin') {?> <div id='sidenote'> <input type='button' value='Bewerken' id='sent_data' class='button' /> <div id="feedback" /> </div> <?php }в//Active page: $pagina = 'over_ons'; ?> <input type='hidden' id='pagina' value='<?php echo $pagina; ?>'> <!--Show active page to javascript--><?php //Active user: if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin'){ $editor = $_SESSION['gebruikersnaam']; ?> <input type='hidden' id='editor' value='<?php echo $editor; ?>'> <!--Show active user to javascript--><?php } ?> <!--Editable DIV: --> <div class='big_wrapper' id='editable'> <?php //Get eddited page content from the database $query=mysql_query("SELECT inhoud FROM paginas WHERE naam_pagina='" .$pagina. "'"); while($inhoud_test=mysql_fetch_array($query)){ $inhoud=$inhoud_test[0]; } //Show content echo $inhoud; ?> </div> <!--Show edit button--> <?php if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin') {?> <div id='sidenote'> <input type='button' value='Bewerken' id='sent_data' class='button' /> <div id="feedback" /> </div> <?php }
Поскольку это довольно длинный и сложный файл, я попытался перевести большинство моих комментариев на английский.
Если вы хотите перевести что-то, что уже не переведено, исходный язык – голландский.
javascript.js :
//If the system is in edit mode and the user tries to leave the page, //let the user know it is not so smart to leave yet. $(window).bind('beforeunload', function(){ var value = $('#sent_data').attr('value'); //change the name of the edit button if(value == 'Verstuur bewerkingen'){ return 'Are you sure you want to leave the page? All unsaved edits will be lost!'; } }); //Make content editable $('#sent_data').click(function(){ var value = $('#sent_data').attr('value'); //change the name of the edit button if(value == 'Bewerken'){ $('#sent_data').attr('value', 'Verstuur bewerkingen'); //change the name of the edit button var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div editable $div.prop('contenteditable',!isEditable).toggleClass('editable') $('#feedback').html('<p class="opvallend">The content from<BR>this page is now<BR>editable.</p>'); }else if(value == 'Verstuur bewerkingen'){ var pagina = $('#pagina').val(); var editor = $('#editor').val(); var div_inhoud = $("#editable").html(); $.ajax({ type: 'POST', url: 'sent_data.php', data: 'tekst=' +div_inhoud+ '&pagina=' +pagina+ '&editor=' +editor, success: function(data){ Change the div back tot not editable, and change the button's name $('#sent_data').attr('value', 'Bewerken'); //change the name of the edit button var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div not editable $div.prop('contenteditable',!isEditable).toggleClass('editable') //Tell the user if the edditing was succesfully $('#feedback').html(data); setTimeout(function(){ var value = $('#sent_data').attr('value'); //look up the name of the edit button if(value == 'Bewerken'){ //Only if the button's name is 'bewerken', take away the help text $('#feedback').text(''); } }, 5000); } }).fail(function() { //If there was an error, let the user know $('#feedback').html('<p class="opvallend">There was an error.<BR>Your changes have<BR>not been saved.<BR>Please try again.</p>'); }); } });
И наконец,
sent_data.php :
<?php session_start(); include_once('./main.php'); include($main .'connectie.php'); //Look up witch page has to be edited $pagina=$_POST['pagina']; //Get the name of the person who eddited the page $editor=$_POST['editor']; //Get content: $tekst=$_POST['tekst']; $tekst = mysql_real_escape_string($tekst); $query="UPDATE paginas SET naam_editer='" .$editor. "', inhoud='" .$tekst. "' WHERE naam_pagina='" .$pagina. "'"; } if(mysql_query($query)){ echo "<p class='opvallend'>Successfully saves changes.</p>"; }else{ echo "<p class='opvallend'>Saving of changes failed.<BR> Please try again.</p>"; } ?>
Используйте язык на стороне клиента, например JavaScript (или лучший, jQuery), чтобы управлять редактированием полей ввода.
Используйте AJAX для захвата полевых данных и отпустите его в файл PHP, который будет хранить данные в вашей базе данных.
Вот очень упрощенный пример использования jQuery для управления включением / отключением полей ввода:
jsFiddle Demo
$('.editable').prop('disabled',true); $('.editbutt').click(function(){ var num = $(this).attr('id').split('-')[1]; $('#edit-'+num).prop('disabled',false).focus(); }); $('.editable').blur(function(){ var myTxt = $(this).val(); $.ajax({ type: 'post', url: 'some_php_file.php', data: 'varname=' +myTxt+ '&anothervar=' +moreTxt }); });
Файл PHP: some_php_file.php
<?php $myVar = $_POST['varname']; $secondVar = $_POST['anothervar']; //Now, do what you want with the data in the vars
Использование AJAX довольно просто. Я привел очень краткий пример того, как это будет выглядеть. Не смотрите в HTML или jQuery для переменной moreTxt – я добавил, чтобы показать, как вы добавили бы второй var данных в ajax.
Вот несколько основных примеров, которые помогут вам ускорить работу с ajax:
Обратный вызов запроса AJAX с использованием jQuery
Нет никакого короткого пути к изучению jQuery или AJAX. Прочтите примеры и поэкспериментируйте.
Здесь вы можете найти отличные, бесплатные обучающие программы jQuery:
ОБНОВЛЕНИЕ РЕДАКТИРОВАНИЯ:
Чтобы ответить на ваш запрос по запросу:
Чтобы отправить данные из DIV в файл PHP, сначала нужно событие, которое запускает код. Как вы упомянули, в поле ввода это может быть событие blur() , которое запускается, когда вы покидаете поле. В <select> это может быть событие change() , которое запускается при выборе выделения. Но на DIV … ну, пользователь не может взаимодействовать с div, не так ли? Триггер должен быть тем, что пользователь делает , например, нажатием кнопки.
Таким образом, пользователь нажимает кнопку – вы можете получить содержимое DIV с помощью команды .html() . (В блоках ввода и элементах выбора вы должны использовать .val() , но в DIV и ячейках таблицы вы должны использовать .html() . Код будет выглядеть так:
Как отправить содержимое DIV после нажатия кнопки:
HTML:
<div class='big_wrapper' contenteditable> PAGE CONTENT </div> <input id="mybutt" type="button" value="Send Data" />
JQuery:
$('#mybutt').click(function(){ var myTxt = $('.big_wrapper').html(); $.ajax({ type: 'post', url: 'some_php_file.php', data: 'varname=' +myTxt+ '&anothervar=' +moreTxt }); });