복사 아이콘으로 콘텐츠 복사

개발
1

안녕하세요, 플러그인이 폼을 통해 제공한 데이터를 그대로 출력하는 대신, 사용자가 원할 때 ‘복사’ 아이콘을 클릭하여 해당 내용을 복사할 수 있도록 하려고 합니다.

Discourse에서 코드 블록에 이 기능을 도입한 것을 확인했지만, 해당 기능은 코드 블록 내에서만 작동합니다. 제가 원하는 다른 위치에서도 이 기능을 사용할 수 있는 방법이 있을까요?

감사합니다,

2

아마도 이 #customization:theme-component가 찾고 있는 것일 수 있습니다: 📄 Copy Post Component
이것을 사용하면 게시글 전체를 복사할 수 있습니다.

3

커스텀 위자드 플러그인의 데이터를 사용하려고 합니다. 즉, 특정 문구를 복사할 수 있도록 활성화하고 싶은 거예요. 테마 컴포넌트로는 이 기능이 제공되지 않는 것 같은데, 커스터마이징을 통해 구현할 수 있을까요?

4

맞아요, 이 컴포넌트는 게시글의 전체 내용을 복사합니다. 커스터마이징이 가능해 보이긴 합니다. 기대하시는 결과에 대한 시각적 예시를 공유해 주실 수 있을까요? 이 플러그인을 사용해 본 적이 없어서, 어떤 단계나 컨텍스트에서 해당 커스터마이징을 원하시는지 정확히 모르겠습니다.

5

Custom Wizards 플러그인을 사용하여 페이지를 만들 때, 플러그인이 제공하는 변수들의 출력을 복사하고 싶습니다. 이를 메시지 내용 내에서 무작위로 선택된 영역이라고 생각할 수 있습니다. 복사할 콘텐츠에 사용자 정의 CSS 선택자를 지정할 수 있습니다.

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

  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;

선택자가 여기에 있습니다. 전체 cooked 대신 cooked div 내의 마지막 p 태그 또는 그 직전 p 태그를 대상으로 하고 싶습니다. 가능하다면 각각을 개별적으로 대상으로 지정하고, 복사 아이콘을 해당 문단 바로 옆에 배치하고 싶습니다.