editor

플러그인과 명령

버튼·명령·단축키·붙여넣기 규칙을 묶어 플러그인으로 만들기.

플러그인은 { name, init(editor) } 객체입니다. init 에서 버튼·명령·이벤트를 붙이고, 정리할 일이 있으면 함수를 돌려주세요. 에디터가 없어질 때 불립니다.

const wordCountLimit = {
  name: 'word-limit',
  init(editor) {
    const check = () => {
      const { words } = editor.getStats();
      editor.root.classList.toggle('is-over', words > 500);
    };
    editor.on('change', check);
    return () => editor.off('change', check);
  },
};

const stamp = {
  name: 'stamp',
  init(editor) {
    editor.addCommand('stamp', (ed) => ed.insertHTML('<p><mark>확인 완료</mark></p>'));
    editor.addButton('stamp', { icon: '확인', title: '확인 도장', onAction: (ed) => ed.exec('stamp') });
  },
};

createEditor('#editor', {
  plugins: [wordCountLimit, stamp],
  toolbar: 'board | stamp',
  shortcuts: [{ keys: 'Mod+Shift+S', run: (ed) => ed.exec('stamp') }],
});