Удаление стилей из текста при копировании/вырезании с помощью CSS или Javascript

Эй,

Хорошо продолжалось лапширование по этому поводу: Как копировать/вырезать текст без приведения в порядок любого стиля багажа (цвет фона, цвет и т.д.)?

Пара путей нападений, которые были сорваны:

Стиль текста по-другому использовать:: select? Не работает,:: стиль не копируется
Стиль выделенного текста с использованием привязки выбора jQuery. Это работает только для входов, а не для p, divs
Перехватить и удалить стиль, привязав событие к копированию/вставке с помощью jQuery? Невозможно получить доступ к скопированному объекту для удаления материала, попробовав использовать e.preventDefault(); затем возвращает объект события, но это не сработало.
Измените данные буфера обмена после его сохранения? Также не кубики, большинство браузеров не позволят вам без этого флеши и подтверждения какого-либо рода.

В любом случае, мысли? Похоже, это было бы очень полезно для сайтов с белым цветом фона.

Ответ 1

У меня нет времени, чтобы скопировать пример сейчас, но вы можете сделать это для вырезания/копирования, вызванного быстрыми клавишами. Это не будет работать для вырезания/копирования через контекстное меню или меню "Изменить", потому что оно зависит от изменения пользовательского выбора до того, как произойдет вырезание или копирование.

Этапы:

Обработайте сочетания клавиш Ctrl - C и Ctrl - X и эквиваленты Mac.
В этом обработчике создайте элемент вне экрана (абсолютное положение и левое -10000 пикселей, скажем) и скопируйте в него выделенный контент. Вы можете сделать это, используя window.getSelection().getRangeAt(0).cloneContents(), хотя вам понадобится отдельный код для IE < 9, и вы должны проверить, что выбор не свалился.
Сделайте все, что захотите, чтобы изменить стиль содержимого элемента вне экрана.
Переместите выделение, чтобы охватить содержимое элемента вне экрана, чтобы этот текст был вырезан или скопирован.
Добавьте кратковременную задержку (несколько миллисекунд), используя window.setTimeout(), которая вызывает функцию, которая удаляет внеэкранный элемент и восстанавливает исходный выбор.

Ответ 2

Вам нужно, чтобы это произошло в браузере... для каждого пользователя?

Если не - и это просто для вас - тогда вы можете сделать это с помощью программного обеспечения Clipmate.

http://www.clipmate.com/index.htm

У него есть функция, которая удаляет все стили.

Ответ 3

После того, как вы вызвали копирование или вырезание, вы можете удалить теги html и только текст с некоторым регулярным выражением

var String = Sample.replace(/(<([^>]+)>)/ig,"");

Также, если у вас есть сохраненный текст в div с id "sample_div" Используйте var String=$('sample_div').text('');, чтобы получить только текст внутри

Ответ 4

Учитывая текущие возможности браузера, вы можете перехватить событие копирования, получить выделение без стиля и поместить его в буфер обмена.

Я тестировал этот код с Chrome/Safari/Firefox. Поверьте, это должно работать и в браузерах MS.

document.addEventListener('copy', function(e) {
  const text_only = document.getSelection().toString();
  const clipdata = e.clipboardData || window.clipboardData;  
  clipdata.setData('text/plain', text_only);
  clipdata.setData('text/html', text_only);
  e.preventDefault();
});