Как сохранять и извлекать данные, пригодные для контента

Я хочу, чтобы администраторы моего веб-сайта могли изменять текст некоторых страниц. Использование contentediteble было бы идеально для меня.
Проблема в том, что я знаю, как программировать на PHP. Я искал в Интернете часами, пытаясь заставить его работать для меня, но я просто не понимаю языки программирования, используемые для хранения данных, достаточных для того, чтобы они работали.

Вот как я хотел бы работать:
1. Администратор нажимает кнопку "edit"
2. div становится редактируемым.
3. Когда администратор готов к редактированию, он нажимает кнопку "Сохранить"
4. Данные сохраняются в файл или базу данных (не знаю, что будет лучшим вариантом).
5. Измененный контент отображается при открытии страницы.

Я знаю, как сделать часть с преобразованием div в contenteditable div, когда admin нажимает "редактировать".
Моя проблема в том, что я действительно не знаю, как сохранить отредактированные данные.
Я также не знаю, будет ли сложно извлечь данные из файла, а также о том, как сохранить данные. Если он будет сохранен в базе данных, у меня не возникнет проблем с его извлечением, но я не знаю, возможно ли это, и если это лучший вариант.

@gibberish, большое вам спасибо за ваш быстрый ответ!
Я пытался заставить его работать, но он пока не работает. Я не могу понять, что я делаю неправильно.

Еще раз спасибо за вашу большую помощь!
Можете ли вы также помочь мне сделать div редактируемым только тогда, когда пользователь нажимает кнопку?

Мне потребовалось более 2 недель, чтобы, наконец, сделать работу. Мне пришлось изучить javascript, jQuery и Ajax. Но теперь он работает безупречно. Я даже добавил некоторые дополнения для причудливости:)
Я хотел бы поделиться, как я это сделал, если кто-то хочет сделать то же самое.

Поскольку это довольно длинный и сложный файл, я попытался перевести большинство моих комментариев на английский. Если вы хотите перевести что-то, что уже не переведено, исходный язык - голландский.
<Б > javascript.js:

Ответы

Ответ 1

Используйте язык на стороне клиента, например 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-учебники:

http://thenewboston.com

http://phpacademy.org

ИЗМЕНЕНИЕ ОБНОВЛЕНИЯ:

Чтобы ответить на ваш запрос по запросу:

Чтобы отправить данные из 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
    });

});

Ответ 2

Вы могли бы спасти весь Страница клиента с этим:

    <script>
function saveAs(filename, allHtml) {
allHtml =  document.documentElement.outerHTML; 
var blob = new Blob([allHtml], {type: 'text/csv'});
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;        
document.body.appendChild(elem);
elem.click();        
document.body.removeChild(elem);
}
}    
</script>

НТН