HTML div contenteditable=true로 에디터 만드는데

contenteditable=true 속성을 사용하여 에디터를 만들었는데, 볼드체와 글꼴색상을 동시에 적용하려면 다음과 같이 코드를 작성할 수 있습니다: 해당 코드에서 'toggleStyle' 함수는 볼드체를 적용하거나 해제하는 기능을 구현합니다. 'setFontColor' 함수는 글꼴색상을 설정합니다. 이 때, 'styleWithCSS' 커맨드를 사용하여 CSS 스타일을 적용할 수 있도록 설정하고, 'foreColor' 커맨드를 사용하여 글꼴색상을 변경합니다. 추가적으로, 'editor'는 에디터의 div 요소에 해당하는 엘리먼트입니다. 해당 엘리먼트에 ID를 부여하고, 위의 코드에서 'editor' 변수를 사용하는 부분을 해당 ID로 수정해주어야 합니다. 위의 코드를 사용하면 볼드체와 글꼴색상을 동시에 적용할 수 있을 것입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const btnBold = document.getElementById('btn-bold');
const selectFontColor = document.getElementById('select-font-color');
const editor = document.getElementById('editor');

btnBold.addEventListener('click', function() {
  toggleStyle('bold');
});

selectFontColor.addEventListener('change', function() {
  setFontColor(this.value);
});

function toggleStyle(style) {
  document.execCommand(style, false, null);
  editor.focus();
}

function setFontColor(color) {
  document.execCommand('styleWithCSS', false, true);
  document.execCommand('foreColor', false, color);
  editor.focus();
}