@멘션

@ 를 치고 이름을 치면 사람 목록이 뜨고, 고르면 @이름 덩어리가 들어갑니다. 댓글, 업무 게시판에서 누군가를 부를 때 씁니다. 사람 목록은 사이트가 search 함수로 넘겨 줍니다.

createEditor('#editor', {
  toolbar: 'bold italic | link',
  mentions: {
    trigger: '@',
    search: (q) => [
      { id: 'minsu', label: '김민수' },
      { id: 'jiyoung', label: '이지영' },
      { id: 'junho', label: '박준호' },
      { id: 'seoyeon', label: '최서연' },
    ].filter((u) => u.label.includes(q) || u.id.includes(q.toLowerCase())),
  },
});

쓰는 법

• 줄 맨 앞, 공백 뒤, 여는 괄호 뒤에서 @ 를 치면 시작합니다. a@b 처럼 글자에 붙은 @ 는 시작하지 않습니다.
• @ 만 친 순간에도 빈 검색어로 search('') 가 불립니다. 자주 부르는 사람을 돌려주면 좋습니다.
• 검색어는 공백 없이 서른 글자까지입니다. 한글은 조합 중인 글자로도 검색합니다.
• 결과는 여덟 개까지 보이고, 이름 옆에 id 가 작게 나옵니다. ↑ ↓, Enter/Tab, Esc 로 다룹니다.
• 넣은 멘션은 한 덩어리라서 안을 고칠 수 없고, 지우면 한 번에 지워집니다. 뒤에 공백 하나가 따라 들어갑니다.

서버에서 찾기

search 는 배열이나 Promise 를 돌려주면 됩니다. 글자를 칠 때마다 불리고, 늦게 온 이전 응답은 버립니다.

createEditor('#editor', {
  mentions: {
    search: async (q) => {
      const res = await fetch('/api/members?q=' + encodeURIComponent(q));
      return res.json(); // [{ id: 'minsu', label: '김민수' }, …]
    },
  },
});

저장되는 HTML

<p><span data-mention="minsu">@김민수</span> 님, 확인 부탁드립니다.</p>

서버는 span[data-mention] 의 값으로 누구를 불렀는지 알 수 있습니다. 알림을 보낼 때 쓰면 됩니다.

옵션