В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
form (11)
html (147)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

Contenteditable -редактируемая область.

contenteditable или редактируемая область текста. Другими словами если у вас присутствует contenteditable, то текст который находится внутри доступен для редактирования.

Подробно о "contenteditable"

  1. Что такое contenteditable?
  2. Пример сохранения данных из contenteditable
  3. Скачиваем архив с contenteditable php. Пример contenteditable с перезагрузкой.
  4. Теория сохранения данных из contenteditable.
  5. Форма получения данных из contenteditable
    Javascript получения данных из contenteditable
    Php получения данных из contenteditable
  6. Сохранить данные из contenteditable без перезагрузки.
  7. Пример с contenteditable без перезагрузки.
    Скачиваем архив с contenteditable.

  1. Что такое contenteditable?

    Начнем с главного вопроса : Что такое contenteditable?

    contenteditable - это атрибут html, который можно присвоить элементу Dom-a

    Пример использования атрибута contenteditable:

    <div contenteditable="true">Испытай contenteditable</div>

    Выведем приведенный пример "contenteditable":

    Наведите мышку на текст ниже и нажмите...

    Испытай contenteditable
    [kod]

    Синтаксис contenteditable?

    contenteditable="true | false"

    Какие значения contenteditable может принимать?

    true - включает режим редактирования.

    false - отключает режим редактирования.

    Запрещает редактирование элемента. contenteditable?

    Вместо true допустимо указывать пустое значение (contenteditable="") или вообще его не писать (contenteditable).

    Пример использования contenteditable?

    Давайте создадим пару блоков с атрибутом contenteditable и это будет пример использования contenteditable в html^

    <h2 contenteditable="true">Пример редактируемого абзаца с contenteditable</h2>

    <div contenteditable="true">Здесь текст внутри тега div с атрибутом "contenteditable"</div>

    Разместим прямо здесь:

    Чтобы проверить contenteditable в действии, просто нажмите по одному из элементов.

    Нажмите мышкой по любой из ниже идущих строк:

    Пример редактируемого абзаца с contenteditable

    Здесь текст внутри тега div с атрибутом "contenteditable"

  2. Пример сохранения данных из contenteditable

    Рассмотрим живой живой пример "сохранения данных из contenteditable" - как это работает!?

    Скачиваем архив с contenteditable php.

    В архиве будет папка - "contenteditable_php" - заходим туда:

    Там вы увидите файл - "contenteditable_php.php"

    Бросаем его в любую папку на сервере...

    Нажмите, чтобы открыть в новом окне.
    Пример сохранения данных из contenteditable

    При первом открытии файл в браузере вы увидите надпись - "текст еще не редактировался".

    Как только вы измените значение внутри "contenteditable" - появится кнопка - "сохранить".

    Нажмите, чтобы открыть в новом окне.
    Пример сохранения данных из contenteditable

    Печатаем новый текст внутри contenteditable и нажимаем сохранить:

    Как видим - наш новый текст прекрасно сохранился из поля "contenteditable"

    Нажмите, чтобы открыть в новом окне.
    Пример сохранения данных из contenteditable

  3. Теория сохранения данных из contenteditable.

    Выше мы разобрали - как работает пример получения и сохранения данных из "contenteditable" - теперь попробуем разобраться в теории!

    Contenteditable + php по пунктам:

    Нам(естественно) понадобится элемент, пусть это будет div, в него помещаем атрибут contenteditable + id + внутрь помести наш текст выведем его через echo.

    <div contenteditable="true" id="idcontenteditable"><? echo $text; ?></div>

    Если текст еще не редактировался напишем условие

    if(!$text) {$text = 'текст еще не редактировался'; }

    Нам потребуется
    1). форма(form)
    2). с методом post

    <form method="post">
    </form>

    Внутрь формы поместим : textarea + position: absolute - это поле мы не увидим, потому, что оно будет скрыто за левым краем монитора(left: 99999px;).

    <textarea name="mess" style="position: absolute; left: 99999px;" id="idtextarea"></textarea>

    Чтобы отправить данные нам понадобится "submit" у него будет атрибут attribute style с style="display:none;" -после изменения текста внутри contenteditable "display:none" изменится на "display:block"

    <input type="submit" name="submit" id="submit" value="сохранить" style="display:none;">

    Соберем всю форму для отправки данных из contenteditable

    <form method="post">

    <textarea name="mess" style="position: absolute; left: 99999px;" id="idtextarea"></textarea>

    <input type="submit" name="submit" id="submit" value="сохранить" style="display:none;">

    </form>

    Как получать данные из поля contenteditable?

    Для того, чтобы получить данные из "contenteditable" - никакого встроенного способа не существует!

    Поэтому нам понадобится javascript :

    Во избежании ошибки - есть ваше поле contenteditable на странице или нет? Сделаем проверку по "Id" через getElementById

     if(document.getElementById("idcontenteditable"))

    Обращаемся(обратиться к тегу) к нашему contenteditable по его "Id"

    tvirtual = document.getElementById("idcontenteditable");

    Нам понадобится событие onkeydown

    tvirtual.onkeydown = IS_VIRT;

    Если текст в contenteditable изменен, то открываем кнопку сохранить + отправляем в поле "textarea"(используем innerHTML) измененный текст в contenteditable

    function IS_VIRT()
    {
    submit.style.display = "block";
    idtextarea.innerHTML = idcontenteditable.innerHTML;
    }

    Соберем весь код получения данных из contenteditable через javascript

    <script>

     if(document.getElementById("idcontenteditable"))

     {

      tvirtual = document.getElementById("idcontenteditable");

      tvirtual.onkeydown = IS_VIRT;

      function IS_VIRT()

      {

        submit.style.display = "block";

        idtextarea.innerHTML = idcontenteditable.innerHTML;

      }

     }

    </script>

    Php код записи данных из contenteditable

    Когда мы все приготовления сделали, данные получили нажимаем сохранить...

    Нам понадобится:

    Чтобы ваш файл не зависел от внешних факторов используйте путь на сервере.

    Здесь используем __DIR__

    Проверяем по условию отправку данных:

    if($_POST["mess"])

    Записываем данные - file_put_contents

    $write = @file_put_contents( $path_file , strip_tags($_POST['mess']));

    Если запись прошла, то делаем переадресацию на эту же страницу, чтобы избежать повторной отправки формы + exit

    if($write) exit('<meta http-equiv="refresh" content="0; url=">');

    Соберем весь код Php записи данных из contenteditable

    <?
    $path_file = __DIR__.'/file_name.txt';
    if($_POST["mess"])
    {
    $write = @file_put_contents( $path_file , strip_tags($_POST['mess']));
    if($write) exit('<meta http-equiv="refresh" content="0; url=">');
    }
    ?>

    Теория получения и сохранения данных использована в примере.


  4. Сохранить данные из contenteditable без перезагрузки.

    Для того, чтобы сохранить данные из contenteditable без перезагрузки. нам потребуется:

    Алгоритм скрипта записи данных из contenteditable без перезагрузки.

    Получить данные.

    Отправить данные.

    Записать данные.

    Вывести данные.

    По большому счету, верхний вариант отличается от версии элемента с атрибутом "contenteditable" без перезагрузки, только тем, что POST-запрос отправляется через JavaScript.

    Итак...

    Как работает сохранение данных из contenteditable?

    Скачиваем архив.

    В архиве 3 файла:
    1). file_name.txt - тестовый файл, куда будут записываться данные отправленные из поля "contenteditable"
    2).example.php - файл, который будет обрабатывать post запрос. И соответственно записывать данные полученные из contenteditable.
    3). contenteditable.php - файл, в котором находится поле с "contenteditable"

    Нажмите, чтобы открыть в новом окне.
    как работает сохранение данных из contenteditable?

    Бросаем папку, или содержимое в папке в любую другую папку на сервере.

    Открываем файл "contenteditable.php" - у нас есть живой пример из этого архива.

    В поле "contenteditable" пишем новый текст и нажимаем сохранить!

    Нажмите, чтобы открыть в новом окне.
    как работает сохранение данных из contenteditable?

    После этого вы увидите результат - если данные из поля contenteditable записаны, то появится строка, что данные записаны:

    Нажмите, чтобы открыть в новом окне.
    как работает сохранение данных из contenteditable?
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.022117 секунд. Подробнее