본문으로 건너뛰기

triggerTemplate

설명​

선택 사항입니다. triggers 항목에 의해 열리는 제안 드롭다운에서 RichText가 항목을 렌더링하는 방식을 커스터마이징합니다.

기본적으로 드롭다운은 각 항목의 label을 일반 텍스트로 표시합니다. triggerTemplate을 사용하면 아바타, 이름, 이메일 등을 포함한 더 풍부한 행을 렌더링할 수 있습니다.

사용법​

function triggerTemplate({ data, trigger }) {
    return "HTML template of the suggestion item";
};

매개변수​

callback 함수는 다음 매개변수를 가진 객체를 받습니다:

  • data - 현재 제안 항목 ({ id, label, url }, 그리고 trigger의 data 소스에 추가한 모든 커스텀 필드 포함)
  • trigger - 드롭다운을 연 trigger 문자 ("@", "#" 등)
팁

드롭다운의 기본 너비는 160px입니다. 템플릿에 더 많은 공간이 필요한 경우, 선택자 앞에 .wx-editor 부모를 추가하세요:

.wx-editor .wx-suggest-anchor {
    width: 220px;
}

예제​

다음 코드 스니펫은 두 가지 trigger를 설정합니다: 멘션용 @와 태그용 #입니다. triggerTemplate을 사용하여 trigger 값을 확장하고 각 드롭다운을 다르게 렌더링합니다. @ 드롭다운의 경우 템플릿은 아바타(data.image), 닉네임(data.label), 전체 이름(data.name)을 포함한 커스텀 HTML 행을 반환합니다. # trigger의 경우 템플릿은 label을 사용합니다:

const { template, Richtext } = richtext;

new Richtext("#root", {
    triggers: [
        { trigger: "@", data: people },
        { trigger: "#", data: tags }
    ],
    triggerTemplate: template(obj => {
        if (obj.trigger === "@") {
            return `<div className="user">
                <img className="user-avatar" src="${obj.data.image}"/>
                <div className="user-nickname">${obj.data.label}</div>
                <div className="user-name">${obj.data.name}</div>
            </div>`;
        }
        // 다른 트리거(예: "#")는 일반 레이블을 사용합니다
        return obj.data.label;
    })
});

변경 이력: 이 속성은 v2.1에서 추가되었습니다.

관련 샘플:

관련 문서: 멘션과 태그

Need more help?Contact Support