СКРИПТЫ
ТЕГИ:
php (282)
js (144)
html (132)
css (99)
html tags (58)
jquery (39)
edit text (37)
php array (30)
form html (29)
fonts (22)
foto (21)
forum (19)
ruweb.net (19)
atom (19)
html book (17)
board (17)
Показать еще :
php file (16)
js method (16)
hosting (16)
svg (16)
link (15)
htaccess (13)
osclass (13)
color (13)
table (12)
path (12)
php date (11)
online (11)
yandex (11)
js delete (11)
icon (11)
jsphp (11)
input (11)
notepad (11)
form (10)
php img (10)
url (10)
mouse (9)
info (9)
img (7)
cookie (7)
comment (7)
task (7)
ftp (7)
php url (7)
dosite (6)
click (6)
hover (6)
js url (6)
reg.ru (5)
chart (5)
php get (5)
adminka (5)
value (5)
mb (5)
js id (4)
bbcode (4)
submit (4)
js form (4)
browser (4)
select (4)
search (4)
js copy (4)
iframe (4)
symbols (4)
captcha (3)
https (3)
js post (3)
vk (3)
scandir (3)
js time (3)
ssl (3)
vs code (3)
height (2)
details (2)
youtube (2)
tag hr (2)
sitemap (2)
title (2)
ukoz (2)
cursor (2)
console (2)
seo (2)
js vars (2)
video (2)
smile (1)
windows (1)
numbers (1)
archive (1)
header (1)
books (1)
domen (1)
padding (1)

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

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

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

  1. Что такое contenteditable?
  2. Сохранить данные из div contenteditable true
  3. Сохранить данные из contenteditable без перезагрузки.

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

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

    Синтаксис 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. сохранить данные из div contenteditable true

    После того, как вы отредактировали текст в элементе с атрибутом "contenteditable" - как его сохранить!?

    contenteditable + PHP.

    Вам нужен язык, который может записывать данные, например php

    Если честно, то "contenteditable" - это такая "здесь был мат..."... непонятная вещь. Что когда начинаешь задумываться над этим, то первая мысль, ну нахер... возьму обычную форму, если потребуется... либо input либо textarea.
    Т.е. кроме поля ввода с "contenteditable " - вам потребуется реальная форма ввода в скрытом виде. Кроме кнопки submit.

    Далее вам понадобится передать измененные данные из contenteditable в поле ввода формы textarea - здесь без javascript не обойтись...

    В общем примерно это будет так:

    Итого: Наведите мышку на текст и попробуйте изменить текст...
    Здесь текст внутри тега div атрибутом "contenteditable"

    Код, который обрабатывает наш пример...

    Html:

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

    <form method="post" class="new_form">

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

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

    </form>

    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:

    <?

    if($_POST["mess"]) {@file_put_contents("file_name.txt",strip_tags($_POST['mess']));}

    $example = file_get_contents("file_name.txt");

    ?>


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

    Алгоритм абсолютно такой-же...

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

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

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

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

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

    Что в итоге получилось с данным пунктом!?

    Если брать и рассказывать всё по пунктам данный вариант("contenteditable без перезагрузки") , то придется ещё один "талмуд" написать.

    А тема довольно спорная и нужна ли она вообще кому-то это вопрос!

    Поэтому! Живой пример, как оно должно работать, с использованием contenteditable без перезагрузки.
    И чтобы можно было разобраться:

    Добавим данный вариант в скачать:

    Скачать все файлы связанные с атрибутом contenteditable
    В архиве

    В архиве два файла.

    Вам нужен

    contenteditable.php

    В строке номер "4" меняем путь, на свой, куда вы положите файл обработчик "examople.php"

    сохранить данные из  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 как сохранить изменения

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb