Удаление стилей из текста при копировании/вырезании с помощью 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();
});