Копировать в буфер обмена, включая родительский элемент целевого элемента - PullRequest
Новая
       15

Копировать в буфер обмена, включая родительский элемент целевого элемента

1 голос
/ 10 октября 2019

Редактировать - Дополнительная информация:

Упрощенная песочница - https://codesandbox.io/s/stupefied-leftpad-k6eek

Демонстрация: https://imgur.com/a/SDWTQno

Похоже, что проблема не возникает в Firefox, но в Chrome и других браузерах

У меня есть div, который отображает шаблон (упрощенный по ссылке выше), который подключен ккнопка, которая вызывает функцию, которая копирует в буфер обмена.

Однако при вставке того, что копируется в буфер обмена, содержимое центрируется, и при дальнейшей проверке стили div контейнера ({ display: 'flex', margin: '0 auto', justifyContent: 'center' }) также включаются в то, чтоselected.

Как исключить родительский div из копии, он должен only быть нацеленным на HTML-код в литеральном шаблоне (желательно только на то, на что я нацеливаюсь по id - * 1025)*, поэтому не должны быть по центру?

Заранее спасибо

Ответы [ 2 ]

1 голос
/ 14 октября 2019

Я прошу прощения, я полностью неправильно понял, что вы искали .. Я думал, что вы хотели все стилей удалены ..

Кажется, исправить это просто упаковав шаблон«Вы хотите скопировать в div без каких-либо примененных к нему стилей ..

Вот демонстрация с использованием Gmail в Chrome .. 

const { useRef, useCallback } = React;
const { render } = ReactDOM;

function App() {
  const ref = useRef();

  const copyTextToClipboard = el => {
    let range = document.createRange(0);
    range.selectNode(el);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand("copy");
    window.getSelection().removeAllRanges();
  };

  const handleCopyClick = useCallback(() => {
    copyTextToClipboard(
      ref.current.querySelector("#signature-preview-workspace")
    );
  }, [ref]);

  return (
    <div>
      <div
        ref={ref}
        style={{ display: "flex", margin: "0 auto", justifyContent: "center" }}
      >
        <div
          dangerouslySetInnerHTML={{
            __html: `
            <!DOCTYPE html>
            <html>
              <body style="margin:0;padding:0;">
                <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
                <table id="signature-preview-workspace" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td style="color: red;">Contents here...</td>
                    </tr>
                  </tbody>
                </table>
              </body>
            </html>
          `
          }}
        />
      </div>

      <button onClick={() => handleCopyClick()}>Copy</button>
    </div>
  );
}

render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>
1 голос
/ 12 октября 2019

Попробуйте использовать ref вместо прямого поиска документов. 

const copyTextToClipboard = el => {
  const range = document.createRange(0);
  range.selectNode(el);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand("copy");
  window.getSelection().removeAllRanges();
};

const App = () => {
  const ref = React.useRef();

  const handleCopyClick = React.useCallback(() => {
    copyTextToClipboard(
      ref.current.querySelector("#signature-preview-workspace")
    );
  }, [ref]);

  return (
    <div id="App">
      <div
        ref={ref}
        style={{ display: "flex", margin: "0 auto", justifyContent: "center" }}
        dangerouslySetInnerHTML={{
          __html: `
            <!DOCTYPE html>
            <html>
              <body style="margin:0;padding:0;">
                <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
                <table id="signature-preview-workspace" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td>Contents here...</td>
                    </tr>
                  </tbody>
                </table>
              </body>
            </html>
          `
        }}
      />

      <div>
        <button onClick={handleCopyClick}>Copy text above</button>
      </div>

      <textarea placeholder="Paste copied..." />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

У вас есть другая проблема. Вы используете p как дочерний элемент tr, что неверно и приводит к копированию пустого текста. Измените p на td.

...