Скопируйте содержимое TinyMCE на cllipboard с помощью React - PullRequest
Новая
       2

Скопируйте содержимое TinyMCE на cllipboard с помощью React

0 голосов
/ 17 июня 2020

Здравствуйте, у меня есть веб-сайт генератора политик. Когда пользователь генерирует свои политики, они появляются в текстовой области TinyMCE.

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

Текстовый редактор (Tiny MCE): 

<Editor
   apiKey="myAPIKey"
   ref={tinyEditor}
   value={policiesToShow}
   initialValue={null}
   init={{
      height: 500,
      menubar: false,
      plugins: [
         'advlist autolink lists link image charmap print preview anchor',
         'searchreplace visualblocks code fullscreen',
         'insertdatetime media table code help wordcount powerpaste ',
      ],
      toolbar:
         // eslint-disable-next-line no-multi-str
         'undo redo | formatselect | bold italic backcolor | \
   alignleft aligncenter alignright alignjustify | \
   bullist numlist outdent indent | removeformat | help',
   }}
/>

Кнопка копирования: 

<button
   className="button--primary btn float-right mt-4"
   onClick={handleClick}
>
   <ion-icon name="clipboard" className="my-auto"></ion-icon> Copiar
</button>

Визуально:

visual style

Итак, как я могу скопировать этот контент? Я попытался сделать это с помощью Refs, поэтому TinyEditor будет иметь Ref, и я мог бы сделать tinyEditor.select();, но, похоже, это не работает. 

const handleClick = () => {
   tinyEditor.select();
   document.execCommand("copy");
};

Также я знаю, что содержимое TinyEditor остается на :

const value = tinyEditor.current.props.value;

По возможности избегайте jQuery решений.

...