[javascript] MediumEditor에서 에디터 툴바 버튼에 색상 선택 기능 추가하기

30 Nov 2023

javascript

MediumEditor는 사용자가 편집할 수 있는 WYSIWYG(What You See Is What You Get) 에디터입니다. 이 에디터에서는 기본적으로 텍스트 스타일을 변경할 수 있는 툴바 버튼을 제공하고 있습니다. 그러나 기본적으로는 텍스트 색상을 변경할 수 있는 기능은 제공되지 않기 때문에, 이 기능을 추가하고 싶은 경우 직접 구현해야 합니다.

아래는 MediumEditor 에디터에서 툴바 버튼에 색상 선택 기능을 추가하는 예시 코드입니다.

// MediumEditor에 색상 선택 기능을 추가할 함수
function addColorPicker(editor) {
  // 에디터의 툴바에 색상 선택 버튼을 추가
  editor.getExtensionByName('toolbar').addButton({
    name: 'color',
    action: function () {
      // 색상 선택 팔레트를 표시하는 모달 다이얼로그
      var colorDialog = document.createElement('div');
      colorDialog.innerHTML = `
        <input type="color" id="color-picker" />
        <button id="color-picker-btn">확인</button>
      `;
      colorDialog.style.position = 'absolute';
      colorDialog.style.top = '50%';
      colorDialog.style.left = '50%';
      colorDialog.style.transform = 'translate(-50%, -50%)';
      document.body.appendChild(colorDialog);

      // 색상 선택 버튼 클릭 이벤트 처리
      var confirmBtn = colorDialog.querySelector('#color-picker-btn');
      confirmBtn.addEventListener('click', function () {
        var colorPicker = colorDialog.querySelector('#color-picker');
        var color = colorPicker.value;

        // 현재 포커스된 텍스트에 선택한 색상 적용
        editor.setEditorColor(color);

        // 색상 선택 모달 다이얼로그 닫기
        document.body.removeChild(colorDialog);
      });
    }
  });
}

// MediumEditor 초기화
var editor = new MediumEditor('.editable');
editor.init();

// 색상 선택 기능 추가
addColorPicker(editor);

위의 코드는 MediumEditor에서 색상 선택 기능을 추가하는 함수 addColorPicker를 정의한 후, 해당 함수를 호출하여 색상 선택 기능을 에디터에 추가합니다. 에디터 초기화 후, addColorPicker 함수를 호출하여 색상 선택 기능을 추가하면 됩니다.

주의할 점은 위의 코드는 예시 코드로, 작동을 보장하지 않습니다. 실제로 색상 선택 기능을 동작시키기 위해서는 적절한 구현이 필요합니다. 그러나 위의 코드를 참고하면서, MediumEditor에서 에디터 툴바 버튼에 색상 선택 기능을 추가할 수 있는 방법을 이해할 수 있을 것입니다.

참고 자료:

MediumEditor 공식 문서