HTML 모달 다이얼로그 지원

안녕하세요,

카테고리 페이지에서 사용자가 주제를 생성할 수 없는 경우, 신뢰 수준에 대한 주제에 연결된 배너 텍스트를 사용하고 있습니다.
Screenshot 2022-12-09 at 9.09.29

배너에서는 HTML이 정상적으로 작동합니다.

하지만 + 새 주제를 클릭하면 모달에서 HTML이 처리되지 않습니다.

이전에는 사용되었던 bootbox 모달처럼 이 모달에서도 HTML을 처리할 수 있으면 정말 좋겠습니다.

감사합니다 :slightly_smiling_face:

3개의 좋아요

@pmusaraj 님은 HTML 콘텐츠를 지원하는 해결책을 여기에서 제공했습니다.

4개의 좋아요

Tim님, 안녕하세요.

팁 주셔서 감사합니다 :slightly_smiling_face: modifyClass로 이 부분을 수정했지만, 카테고리 배너도 HTML을 처리하므로 이 다이얼로그를 코어에서 htmlSafe로 만드는 것이 합리적인 변경이라고 생각합니다.

import { htmlSafe } from "@ember/template";

export default {
  name: "dialog-html-support",

  initialize() {
    withPluginApi("0.8.7", (api) => {
      api.modifyClass("component:d-navigation", {
        pluginId: "dialog-html-support",
        
        actions: {
          clickCreateTopicButton() {
            if (this.categoryReadOnlyBanner && !this.hasDraft) {
              this.dialog.alert({
                message: htmlSafe(this.categoryReadOnlyBanner),
              });
            } else {
              this.createTopic();
            }
          },
        },
      });
    });
  },
};
3개의 좋아요

팀 여러분 안녕하세요!

아래 설정에서 링크를 사용할 수 있는 옵션을 제공해 주셨으면 합니다. 제 경우, 카테고리는 누구나 볼 수 있지만, 주제를 생성하고 답글을 작성하려면 특정 그룹에 속해 있어야 합니다.

"사용자가 이 카테고리에서 주제를 생성할 수 없을 때 표시되는 배너 텍스트: "

그래서 다음과 같은 텍스트를 사용해 보았습니다:

“참여하려면 ‘그룹에 가입하기’ 링크를 클릭하세요.”

하지만 안타깝게도 이 설정은 링크를 지원하지 않고 순수 텍스트만 지원합니다. 팀에서 이 부분을 변경해 줄 수 있는지 검토해 주실 수 있을까요?

2개의 좋아요

요청 사항들을 한곳에 모으기 위해 해당 게시물을 이 토픽으로 옮겼습니다. :+1:

2개의 좋아요

Jammydodger님, 감사합니다!

때로는 어디에 게시해야 할지 결정하기가 어려울 수 있습니다. Discourse는 방대한 플랫폼이지만, 그것이 반드시 나쁜 것은 아닙니다. 다만 아직 비교적 새로운 우리에게 가끔은 압도적으로 느껴질 수 있죠.

하지만 바로 이때, 놀라운 팀과 커뮤니티가 대개 모든 이들에게 큰 도움이 되어주고 있습니다.

2개의 좋아요

Don & @TimJensen 님, 안녕하세요. 이 해결책은 아래 예시와 같은 마크다운도 수정해 주나요? 사용하려면:

카테고리에 참여하려면 [신청](/g/groupname/members)해야 합니다.

이 코드도 테마 컴포넌트를 만들어야 한다고 생각하는데, 이걸 어떤 섹션에 입력해야 하나요?


수정:
음.. 지금은 js 파일을 추가하는 것이 제 현재 실력 수준을 좀 넘어선 것 같아요. :sad_but_relieved_face: 이걸 성공적으로 해내려면 조금 더 자세한 안내가 필요할 것 같습니다.

1개의 좋아요

Dan님,

배너는 HTML을 지원합니다. 이 주제는 Create topic(주제 만들기) 버튼을 클릭할 때 나타나는 대화상자에 관한 것입니다.

아니요, HTML만 지원합니다. Dan님의 예시는 다음과 같은 형태가 될 것입니다 :arrow_down_small:

카테고리에 참여하려면 <a href="/g/groupname/members">신청</a>해야 합니다.

이렇게 하면 Header에서 대화상자에 HTML을 지원할 수 있습니다. :slightly_smiling_face:

<script type="text/discourse-plugin" version="0.8">
  const { htmlSafe } = require("@ember/template");

  api.modifyClass("component:d-navigation", {
    pluginId: "dialog-html-support",
        
    actions: {
      clickCreateTopicButton() {
        if (this.categoryReadOnlyBanner && !this.hasDraft) {
          this.dialog.alert({
            message: htmlSafe(this.categoryReadOnlyBanner),
          });
        } else {
          this.createTopic();
        }
      },
    },
  });
</script>
3개의 좋아요

좋아요, 그러면 제가 할 일은 마크다운 대신 HTML을 사용하는 것뿐이군요.

그렇다면 누군가가 해당 카테고리 내에서 답변을 하거나 새 주제를 만들려고 할 때 배너가 제대로 작동하나요? 제 이해가 맞다면, 요청하신 내용은 새 주제 버튼의 테마 컴포넌트와 관련이 있는 것 같습니다.

JS를 사용하려면 새 테마 컴포넌트를 생성하고 *.js 파일을 업로드하기만 하면 되나요? CSS 등 다른 부분에서 추가로 필요한 것이 있나요? 아니면 그냥 작동할까요?

그리고 링크 버튼 전에 대화상자를 표시하려면 코드적으로 어떤 작업을 해야 하나요? 아직 배우는 중이라 죄송합니다.

1개의 좋아요

관리자 화면에서 새 컴포넌트를 생성하고 위 코드를 붙여넣기하여 공통 > 헤더 섹션에 추가하세요. 이렇게 하면 새 주제 버튼을 클릭할 때 모달에서 HTML을 처리할 수 있습니다. :slightly_smiling_face:

데모

코드 없이
보시는 바와 같이 배너는 HTML을 지원하지만, 새 주제 버튼을 클릭하면 모달(대화상자)에서는 HTML을 지원하지 않습니다.


코드 적용 시


:arrow_down_small: 이라는 표현이 무슨 뜻인지 잘 모르겠습니다.

2개의 좋아요

html 수정 코드를 어디에 추가해야 하는지 설명해 주셔서 감사합니다.

사실 첫 번째 영상이 제 질문에 완벽하게 답을 주었고 명확하게 이해할 수 있게 해 주었습니다. 링크 버튼 앞의 사전 대화상자 텍스트는 마크다운 절차와 동일합니다. (첫 번째 영상에서는 해당 코드가 없는 경우 실패하는 모습을 보여줍니다) 코드 예시에서도 제가 놓치고 말았네요. :facepalm:

예를 들어

참가하기 “markdown”
참가하기 “hmtl”

저를 깨우쳐 주셔서 정말 감사드립니다.

Dan

2개의 좋아요

지연된 점 사과드립니다, 여러분. 이 링크가 문제를 해결해야 합니다: FIX: Allow HTML in category read-only dialog - Pull Request #20349 - discourse/discourse - GitHub

4개의 좋아요

이 주제는 2일 후 자동으로 닫혔습니다. 새로운 답글은 더 이상 허용되지 않습니다.