# Copiando un contenido con icono de copiar

**URL:** https://meta.discourse.org/t/copying-a-content-with-copy-icon/287007
**Category:** Development
**Created:** [29 Noviembre, 2023 20:59 UTC](https://meta.discourse.org/t/copying-a-content-with-copy-icon/287007 "2023-11-29T20:59:35Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [29 Noviembre, 2023 20:59 UTC](https://meta.discourse.org/t/copying-a-content-with-copy-icon/287007/1 "2023-11-29T20:59:35Z")

</div>

Hola, en lugar de imprimir un dato que me proporciona el plugin a través de un formulario, quiero permitir que los usuarios copien este contenido cuando deseen haciendo clic en un icono de ‘copiar’.

Noté que Discourse ha introducido esta función para los bloques de código, pero solo funciona dentro de estos bloques. ¿Cómo puedo usarla en otros lugares como deseo?

> [@Copy codeblock contents to clipboard](https://meta.discourse.org/t/copy-codeblock-contents-to-clipboard/148855):
>
> mega Now live in core Discourse is the ability to show a copy button for codeblocks! import { createWidget } from 'discourse/widgets/widget'; createWidget('my-widget', { tagName: 'div.hello', html() { return "hello world"; } }); This feature is off by default, but if your community could benefit from it, you can turn it on by enabling the show copy button on codeblocks site setting. Some notes about the feature: The button shows up on pre \> code codeblocks, but not inline, …

Gracias,

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [29 Noviembre, 2023 21:14 UTC](https://meta.discourse.org/t/copying-a-content-with-copy-icon/287007/2 "2023-11-29T21:14:52Z")

</div>

Quizás este componente de tema #customization:theme\_component sea lo que estás buscando [📄 Copy Post Component](https://meta.discourse.org/t/copy-post-component/218883?u=moin)  
Con él puedes copiar una publicación completa

---

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [29 Noviembre, 2023 22:21 UTC](https://meta.discourse.org/t/copying-a-content-with-copy-icon/287007/3 "2023-11-29T22:21:18Z")

</div>

Quiero usarlo para datos del plugin Custom Wizard, lo que significa que quiero habilitar la copia de una frase específica. Creo que el componente del tema no proporciona esto. Pero, ¿podría lograrlo personalizándolo?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [30 Noviembre, 2023 04:34 UTC](https://meta.discourse.org/t/copying-a-content-with-copy-icon/287007/4 "2023-11-30T04:34:05Z")

</div>

Tienes razón, el componente copia todo el contenido de la publicación. Esto parece factible de personalizar, sin duda. ¿Puedes compartir un ejemplo visual de lo que esperas? Nunca he usado este plugin, así que no estoy seguro en qué paso o contexto quieres esa personalización.

---

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [30 Noviembre, 2023 13:30 UTC](https://meta.discourse.org/t/copying-a-content-with-copy-icon/287007/5 "2023-11-30T13:30:17Z")

</div>

Al crear una página con el plugin Custom Wizards, quiero copiar la salida de las variables que me proporciona el plugin. Así que podemos pensar en ello como un área seleccionada aleatoriamente en el contenido del mensaje. Puedo asignar un selector CSS personalizado al contenido que se va a copiar.

[https://github.com/keegangeorge/discourse-copy-post/blob/main/javascripts/discourse/widgets/copy-widget.js](https://github.com/keegangeorge/discourse-copy-post/blob/main/javascripts/discourse/widgets/copy-widget.js)

```plaintext
  click(attrs) {
    const copyButton = attrs.currentTarget.activeElement;
    const rawCooked = this.attrs.attrs.cooked;
    const cookedText = this.attrs.attrs.cooked.replace(/<p>(.*)<\/p>/g, "$1\n");
    let postContents = cookedText.replace(/<([^>]+)>/gi, "");

    if (settings.copy_raw_html) {
      postContents = rawCooked;
    }

```

const rawCooked = this.attrs.attrs.cooked;

El selector está aquí. Quiero apuntar a la última etiqueta p o a la penúltima etiqueta p en el div cocido en lugar de a todo el cocido. Quiero apuntarlos por separado si es posible y colocar los iconos de copia justo al lado de los párrafos.
