СКРИПТЫ
ТЕГИ:
php (285)
js (155)
html (135)
css (109)
html tags (61)
jquery (40)
edit text (37)
php array (30)
form html (30)
fonts (27)
ruweb.net (23)
foto (22)
online (20)
atom (20)
forum (19)
svg (18)
Показать еще :
hosting (17)
board (17)
js method (16)
html book (16)
php file (16)
color (15)
php date (15)
link (15)
js events (14)
input (14)
osclass (13)
table (13)
htaccess (13)
dw block (12)
path (12)
select (12)
php img (11)
form (11)
php time (11)
jsphp (11)
icon (11)
js delete (11)
download (11)
notepad (11)
mouse (10)
img (10)
url (10)
js time (9)
info (9)
yandex (9)
dosite (7)
hover (7)
cookie (7)
comment (7)
task (7)
php url (7)
js url (6)
mysql (6)
year (6)
click (6)
list (6)
iframe (6)
browser (5)
search (5)
ftp (5)
chart (5)
adminka (5)
php get (5)
value (5)
mb (5)
week (4)
console (4)
vk (4)
bbcode (4)
symbols (4)
js form (4)
js id (4)
mounth (4)
submit (4)
reg.ru (4)
scandir (3)
line (3)
pages (3)
https (3)
js post (3)
ucoz (3)
js img (3)
padding (3)
day (3)
captcha (3)
vs code (3)
ssl (3)
second (2)
cursor (2)
tag hr (2)
money (2)
рся (2)
height (2)
js vars (2)
title (2)
counter (2)
typeof (2)
details (2)
youtube (2)
video (2)
base64 (2)
seo (2)
qr kod (2)
arrows (2)
sitemap (2)
smile (1)
google (1)
windows (1)
archive (1)
domen (1)
numbers (1)
speed (1)
books (1)
scroll (1)
header (1)
days (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

    Синтаксис 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 и нажимаем сохранить:

    Как видим - наш новый текст прекрасно сохранился из поля "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?

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

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

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

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!
    как работает сохранение данных из contenteditable?
    как работает сохранение данных из contenteditable?

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

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!
    как работает сохранение данных из contenteditable?
    как работает сохранение данных из contenteditable?

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
contenteditable
contenteditable true
div contenteditable
html contenteditable
js contenteditable
document contenteditable
body contenteditable
document body contenteditable
document body contenteditable true
глобальный атрибут html contenteditable используется для
update таблицы с помощью contenteditable javascript
vue contenteditable v model
сохранить данные из div contenteditable true
contenteditable текстовый редактор
contenteditable как сохранить изменения
contenteditable html tags
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Последние комментарии :
Марат :
28.04.2022 19:20
У меня на сайте - все скрипты рабочие! Приходите…
подробнее.
Игорь :
05.04.2022 03:52
Спасибо Большое Вам за счетчик скачиваний файлов! Вы единственный, кто выложил действительно рабочий код!…
подробнее.
Марат :
03.04.2022 11:16
Вы обратились не по адресу... Предположим... что у вас есть паравоз...на дровах... И вы обращаетесь в автосервис, …
подробнее.
Good_Serpent :
03.04.2022 08:18
Шара - "расшаренная", доступная для пользователей локальной сети папка. Там происходит обмен информацией,…
подробнее.
Марат :
02.04.2022 20:29
Я даже не знаю, что таоке "шара"... Думаю, что вам нужно искать на специализированном сайте посвященной…
подробнее.
Good_Serpent :
02.04.2022 19:54
Здравствуйте! Нужен скрипт, который бы закрывал файл на шаре, если он там открыт. Не удаётся его удалить для…
подробнее.
ruweb
Страница загружена за : 0.027199 секунд. Подробнее