Блог

Главная - Вопросы по программированию - Вставка собственного HTML-кода в буфер обмена браузера

Вставка собственного HTML-кода в буфер обмена браузера

#javascript #clipboard

#javascript #буфер обмена

Вопрос:

При нажатии кнопки у пользователя будет HTML-контент с текущей страницы в буфер обмена. Затем в электронное письмо вставьте содержимое с сохранением форматирования HTML. Желание состоит в том, чтобы повторить выбор содержимого в окне браузера, не заставляя пользователя выполнять выбор (отдельный просмотр).

У меня есть большая часть этой настройки и работы. Я не верю, что есть проблемы с разрешениями. Однако с помощью приведенного ниже кода я получаю «вставку», но затем вставляю (CTRL V) после этого в буфере вставки ничего нет. Если я переключу его clipboard.writeText() , я получу html в виде открытого текста. Просто использование Blob for html приводит к тому, что буфер вставки становится пустым.

Я думаю, что это относится к Blob части, может text/html быть, часть неверна? Есть ли способ заставить это работать?

 <div id="lipsum" contenteditable="true" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Vivamus mollis, augue eu vulputate fermentum.</p>
</div>
<script>
(function() {
  let html = document.getElementById('lipsum').innerHTML
  let content = new Blob([ html ], { type: 'text/html' })
  let data = [ new ClipboardItem({ [ content.type ]: content }) ]
  
  window.focus()

  setTimeout(() => {
    navigator.clipboard.write(data).then(
      () => console.log('pasted'),                   <<< This fires
      (error) => console.log('not pasted', error)
    )
  }, 2000)
})()
</script>

Комментарии:

1. Я могу повторить проблему, text/html используя прослушиватель событий и изменив тип содержимого буфера обмена на text/html . Должно быть, в этой причуде что-то есть.

Ответ №1:

Ваш код работал для меня в Chrome. Я смог вставить содержимое div после загрузки страницы и ожидания пару секунд. Я действительно замечал ошибки, если у меня не было постоянного фокуса на странице. Например, когда я переводил окно инспектора вперед, это приводило к ошибке.

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
<div id="lipsum" contenteditable="true" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Vivamus mollis, augue eu vulputate fermentum.</p>
</div>

<script>
  (function() {
    let html = document.getElementById('lipsum').innerHTML
    let content = new Blob([ html ], { type: 'text/plain' })
    let data = [ new ClipboardItem({ [ content.type ]: content }) ]

    setTimeout(() => {
      window.focus()
      navigator.clipboard.write(data).then(
        () => console.log('pasted'),
        (error) => console.log('not pasted', error)
      )
    }, 2000)
  })()</script>
</body>
</html>

Комментарии:

1. Да, я думаю, я только что понял, что Synergy (совместное использование клавиатуры и мыши) удаляет html.

2. Я сделал что-то подобное в прошлом, и это немного проблематично для разных браузеров / сред. Всегда есть что-то вроде clipboardjs.com

3. Да, так оно и было (копирование на другой компьютер, должно быть, привело к удалению содержимого буфера обмена, связанного с html).

4. Поздно на вечеринку, но я не совсем понимаю это решение. В исходном вопросе в качестве типа MIME был указан ‘text / html’, и проблема, похоже, связана с этим. В этом ответе тип MIME изменен на «текст / обычный». Это работает нормально (при вставке вы получаете HTML-теги дословно, вы не вставляете форматированный контент), но на самом деле это не было целью первоначального вопроса, не так ли? Я что-то пропустил?

Метки: