HTML и внешний файл на хостинге

[inluft]

Доброго времени суток, помогите с таким вопросом.
Необходимо сделать что-то типа маленького веб-веб редактора.
Суть:
На хостинге лежат, к примеру, три файла. Веб страницы. По формату они- как письма email. То есть у них есть отформатированные уже div'ы с текстом. (Заглавие, основной текст, подпись).
Нужно создать четвертую страницу, на которой можно будет редактировать код одной из трех.
Тоесть четвертая страница должна открывать на выбор (переключ список) одну из трех исходных, и редактировать содержимое div'ов.
Подскажите пожалуйста, как можно это осуществить?

[Alex11223]

А проблема-то в чем именно?

Надо получить текст от сервера (РНР и т.п.), вывести его куда-то на странице (textarea, ...), после редактирования отправить новый текст серверу (POST запрос). Еще обычно удобнее хранить данные в БД (MySQL, ...), а не файлах.

Если у вас только HTML/CSS/JS без бекенда (PHP), то никак.

[inluft]

Пардон, может тупые вопросы.
Проблема в том, что я не очень понимаю: 1) как с четвертой страницы осуществить поиск в html коде одной из трех исходных страниц div'ов с текстом и присвоить переменной их значение. 2) Как на четвертой странице осуществить редактирование, чтобы потом весь код одной изз трех исходных страниц скопировался в буфер обмена в виде конечного html кода (без переменных и тд)

[Alex11223]

Так надо в буфер обмена или надо сохранить результат редактирования на сервере?

без переменных

Что за переменные?

[inluft]

Я похоже не уточнил. да, после редактирования необходимо сохранить результат в буфер обмена

На счет переменных- я слабо себе представляю этот механизм, имею в виду, что если исходный код был

".... <div class="heading" eqid="EQMST-5D3E8BB4-426D-4955-9639-2A3F9445ED32" style="font-size: 16px; font-family: 'Lucida Grande'; ">
<div style="color: rgb(201, 30, 67); font-family: Arial; font-size: 24px; font-style: normal; font-weight: bold; line-height: 28px; text-align: center; text-decoration: none; ">
Текст до редактирования
</div></div>"

То после должен получиться

"....<div class="heading" eqid="EQMST-5D3E8BB4-426D-4955-9639-2A3F9445ED32" style="font-size: 16px; font-family: 'Lucida Grande'; ">
<div style="color: rgb(201, 30, 67); font-family: Arial; font-size: 24px; font-style: normal; font-weight: bold; line-height: 28px; text-align: center; text-decoration: none; ">
Отредактированный текст
</div></div>"

И в буфер.

[Alex11223]

Ну для начала видимо надо получить исходный текст с сервера.
Например ajax в JavaScript (XMLHttpRequest или $.get если jQuery)

Потом вывести его в нужном вам виде на странице редактирования (в textarea и т.п.).
Если нужно выводить не все, то substring, indexOf например в помощь.
Для упрощения поиска можно например добавить в исходный текст (в файле) метки типа HEADER_START, HEADER_END...

Потом после завершения редактирования заменить текст в строке с исходным текстом (и вышеупомянутые метки убрать).
Как-нибудь с помощью substring, indexOf, replace, slice.

С записью в буфер обмена сложнее, зависит от браузера.
https://www.google.com/search?q=js+copy+to+clipboard
Самый просто вариант вывести все в textarea, чтоб пользователь сам скопировал.

[inluft]

Более менее понятно, только по поводу первого пункта не очень.
Получить текст с сервера? Имеется в виду запрос файла? А в файле ведь целиковый огромный код html, метками выделять нужный фрагмент кода? Вот тут, если можно, поподробнее, как для дебилов

[Alex11223]

Имеется в виду запрос файла?

да.

$.get('text.html', function(text) {
    ..........
});

https://api.jquery.com/jquery.get/

метками выделять нужный фрагмент кода

Да, например так.

Или если исходный текст в тех местах вообще не нужен, то можно обойтись одной меткой (например "_HEADER_") и просто replace("_HEADER_", новый_текст) после редактирования.

[inluft]

Буду разбираться, пробовать, спасибо!

[Naive]

я бы открывал фрейм и на document.body вешал .setAttribute( 'contentEditable', true );
а в буфер пинать... ну тут тока флеш, благо готовых либ для этого дофига)