Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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 без перезагрузки.


Последняя дата редактирования : 21.03.2021 13:03
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
contenteditablecontenteditable truediv contenteditablehtml contenteditablejs contenteditabledocument contenteditablebody contenteditabledocument body contenteditabledocument body contenteditable trueглобальный атрибут html contenteditable используется дляupdate таблицы с помощью contenteditable javascriptvue contenteditable v modelсохранить данные из div contenteditable truecontenteditable текстовый редакторcontenteditable как сохранить изменения

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.
Виталий :
24/03/2021 06:05
Не стоит обижаться, люди могут не понимать что ошибка не критична. Может быть до конца не изучали…
подробнее.
Марат :
23/03/2021 02:09
Спасибо, за сообщение! В архив попал вариант, который был на тестировании и там остались некоторые…
подробнее.