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

    Синтаксис 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?

Не благодарите, но ссылкой можете поделиться!
Временная ссылка для быстрейшей индексации : список всех квадратных корней.
Теги :
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
Подписаться + =

ruweb dwweb.ru есть здесь:
Последние комментарии :
Марат :
15.08.2023 17:50
Значит в "maxv" сидит…
подробнее.
михаил :
15.08.2023 16:53
а если это сделано для диаграммы values / maxv)…
подробнее.
Марат :
17.07.2023 15:50
Спасибо за интересный вопрос! Посмотрите …
подробнее.
Александр :
17.07.2023 14:58
а как сделать чтобы при повторном клике значение value возвращалось к…
подробнее.
Марат :
30.06.2023 10:18
Спасибо за внимательность!
подробнее.
???? :
29.06.2023 15:37
Прямоугольник - это геометрическая фигура, у которой три угла…
подробнее.
Немного о ruweb.net!
Страница загружена за : 0.021128 секунд. Подробнее