За последние 24 часа нас посетил 22431 программист и 1130 роботов. Сейчас ищут 683 программиста ...

Сохранение отредактированной области в HTML странице с использованием ContentTools.

Тема в разделе "Вопросы от блондинок", создана пользователем kartovitskii, 31 окт 2017.

  1. kartovitskii

    kartovitskii Активный пользователь

    С нами с:
    30 окт 2017
    Сообщения:
    5
    Симпатии:
    0
    Добрый день всем-всем, очень давно читаю этот форум, но зарегистрироваться решил только сейчас, возник вопрос, метод решения гуглом мне совсем не помог, поэтому надеюсь найти помощь здесь. И так, ближе к делу:

    Имеется визуальный редактор ContentTools, сайт редактора - http://getcontenttools.com/
    На сайте имеется туториал по его подключению, с чем проблем не возникло, возникли проблемы с сохранением отредактированного материала. Имеется база данных, в ней содержится информация, которая выводится средствами PHP.

    Ниже код условной страницы, которая нуждается в редактировании:
    HTML:
    1.  
    2. <!DOCTYPE html>
    3. <html lang="ru">
    4.    <head>
    5.       <title>Название</title>
    6.       <link rel="stylesheet" type="text/css" href="bin/styles/main.css">
    7.       <link rel="stylesheet" type="text/css" href="bin/content-tools.min.css">
    8.       <script src="http://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    9.    </head>
    10.    <body>
    11.       <div data-editable data-name="main-content">
    12.          <p>
    13.                <?php
    14.               $db = mysql_connect("localhost","name","password");
    15.               mysql_select_db("databasetest" ,$db);
    16.               $sql = mysql_query("SELECT `text1` FROM `test` WHERE `id`='1'",$db);
    17.               $result = mysql_fetch_array ($sql);
    18.               print "$result[text1]";
    19.               ?>
    20.          </p>
    21.       </div>
    22.       <script src="bin/content-tools.min.js"></script>
    23.       <script src="bin/editor.js"></script>
    24.    </body>
    25. </html>
    26.  
    По этой ссылке имеется инструкция по настройке на английском - http://getcontenttools.com/tutorials/saving-strategies, но сколько я не перечитывал, видимо не хватает мозгов сообразить как это работает. Да, вижу, что присутствует питон, но я никогда не работал с ним в вебе. Помогите разобраться или толкните в правильном направлении, как с помощью этого редактора сохранить изменения? Возможно даже не прибегая к средствам питона.

    Если нужны еще какие-то данные, код, то обязательно отправлю.
     
  2. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.823
    Симпатии:
    736
    Адрес:
    Татарстан
    нда...
    ну вообще в принципе знаете как в вебе сохраняют данные?
    В простейшем случае - форма с полями - кнопка сабмита - жмем - отправляя POST запрос серверной стороне.... она может быть на питоне, пыхе .. ноде... хоть на чем. В любом случае именно серверная сторона может сохранить в файл, БД и другие хранилища

    Если вам нужен простейший случай - делаете форму в форме этот редактор - кнопку сабмит, которая генерирует событие - отработка этого события там в примерах есть. Чуть сложнее асинхронная передача - то есть без перезагрузки текущей страницы... но там тоже все подробно расписано

    конкретно по шаагам распишите - что у вас получилось, а что нет ... и чего хотите конкретно
     
    kartovitskii нравится это.
  3. kartovitskii

    kartovitskii Активный пользователь

    С нами с:
    30 окт 2017
    Сообщения:
    5
    Симпатии:
    0
    Код (Javascript):
    1. editor.addEventListener('saved', function (ev) {
    2.     var name, onStateChange, passive, payload, regions, xhr;
    3.     // Check if this was a passive save
    4.     passive = ev.detail().passive;
    5.     // Check to see if there are any changes to save
    6.     regions = ev.detail().regions;
    7.     if (Object.keys(regions).length == 0) {
    8.         return;
    9.     }
    10.     // Set the editors state to busy while we save our changes
    11.     this.busy(true);
    12.     // Collect the contents of each region into a FormData instance
    13.     payload = new FormData();
    14.     payload.append('__page__', window.location.pathname);
    15.     for (name in regions) {
    16.         payload.append(name, regions[name]);
    17.     }
    18.     // Send the update content to the server to be saved
    19.     onStateChange = function(ev) {
    20.         // Check if the request is finished
    21.         if (ev.target.readyState == 4) {
    22.             editor.busy(false);
    23.             if (ev.target.status == '200') {
    24.                 // Save was successful, notify the user with a flash
    25.                 if (!passive) {
    26.                     new ContentTools.FlashUI('ok');
    27.                 }
    28.             } else {
    29.                 // Save failed, notify the user with a flash
    30.                 new ContentTools.FlashUI('no');
    31.             }
    32.         }
    33.     };
    34.     xhr = new XMLHttpRequest();
    35.     xhr.addEventListener('readystatechange', onStateChange);
    36.     xhr.open('POST', '/x/save-page');
    37.     xhr.send(payload);
    38. });
    Вот имеется такой код, который захватывает информацию о том, что нажата кнопка сохранения, далее необходимо как я понимаю написать PHP код, который будет отправлять информацию, полученную от этого скрипта с помощью POST. Если я правильно понимаю, то взаимодействие происходит в этой части кода:
    Код (Javascript):
    1.  
    2.     xhr = new XMLHttpRequest();
    3.     xhr.addEventListener('readystatechange', onStateChange);
    4.     xhr.open('POST', '/x/save-page');
    5.     xhr.send(payload);
    UPD1: Получается вместо /x/save-page мне нужно прописать путь до файла с методом POST, который будет отправлять с помощью PHP в БД все?
    Код (Text):
    1.  xhr.open('POST', '/x/save-page');
    UPD2: Если это так, то тут все понятно, вопрос в другом, как в самом PHP скрипте принять передаваемые данные от AJAX, а затем сохранить их?
     
    #3 kartovitskii, 2 ноя 2017
    Последнее редактирование: 2 ноя 2017
  4. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.823
    Симпатии:
    736
    Адрес:
    Татарстан
    как обычно.... смотрите что в $_POST и сохраняете куда и как надо
     
    kartovitskii нравится это.
  5. kartovitskii

    kartovitskii Активный пользователь

    С нами с:
    30 окт 2017
    Сообщения:
    5
    Симпатии:
    0
    Код вызывает /x/save-page с использованием метода POST HTTP. Путь к странице сохраняется в параметре __page__ , содержимое каждой области хранится с использованием имени области в качестве имени параметра. В моем случае имя параметра это main-content в коде самой страницы?
    HTML:
    1. <div data-editable data-name="main-content">
    Следовательно main-content - это своего рода ID в БД?
    /x/save-page - это путь до самого скрипта, который обрабатывает полученные данные и отправляет все в БД?

    Если я все верно понимаю, то:
    PHP:
    1. <?php
    2. include_once("config.php");
    3. $result = mysql_query("SELECT 'data-name' FROM 'testtest'");
    4.  
    5.  
    6. mysql_close($dbconnect);
    7. ?>
    Вопрос что прописывать тут, в таблице имеется столбец data-name с именами областей. Я в упор не понимаю, если не сложно, можете помочь хотя бы псевдокодом, PHP программистом не являюсь, но надо с чего-то начинать.
     
  6. kartovitskii

    kartovitskii Активный пользователь

    С нами с:
    30 окт 2017
    Сообщения:
    5
    Симпатии:
    0
    Я прошу прощения за свою тупость, пошел изучать учебники по PHP, все оказалось просто, нужно было мозг включить.
    PHP:
    1. <?php
    2. file_put_contents('test.txt', '');
    3. $file=fopen('test.txt','a+');
    4. fputs($file,$_POST['main_content']);
    5. fclose($file);
    6. ?>
    Правда до сих пор думаю, если областей редактирования 200, не писать же под каждую POST, можно перебрать циклом foreach? Правда это пока для меня загадка, спасибо ADSoft за хоть какую-то отзывчивость.
     
  7. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.823
    Симпатии:
    736
    Адрес:
    Татарстан
    это ненормальное планирование UI- когда 200 областей редактирования в одной форме.... даже 20..... максимум что нужно 1-2, в край три ... иначе пользователь запутается вних
     
  8. kartovitskii

    kartovitskii Активный пользователь

    С нами с:
    30 окт 2017
    Сообщения:
    5
    Симпатии:
    0
    Посмотрите как работает инструмент - http://getcontenttools.com/demo
    Мне почему-то кажется, что вы не поняли меня немного)
     
  9. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.823
    Симпатии:
    736
    Адрес:
    Татарстан
    так это вся страница одна большая область )