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

Question

Yo,

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

Пара маршрутов атак, которые были сорваны:

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

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

Answer 1

Сейчас у меня нет времени, чтобы написать пример, но вы можете сделать это для вырезки / копирования, вызванной сочетаниями клавиш. Он не будет работать для вырезания / копирования через контекстное меню или параметры меню «Правка», поскольку он основан на изменении выбора пользователя до возникновения события вырезания или копирования.

Шаги:

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

Answer 2

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

Я тестировал этот код с помощью 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();
});

Answer 3

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

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

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

Answer 4

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

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

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

Имеет функциюэто удаляет все стили.