개발자

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

2023년 01월 13일조회 353

div 태그에서 contenteditable=true를 적용하여 에디터를 만드는데 볼드체와 글꼴색상만 필요합니다~ 근데 볼드체 적용하면 글꼴색상(빨간색)은 적용안되고, 글꼴색상(빨간색)을 적용하면 볼드체는 또 적용안되고.. 즉, 빨간색+볼드체가 동시에 적용이 안되는데, 어떻게 코드를 작성해야 좋을까요 ㅠㅠ 고수님들 답변 부탁드립니다! const btnBold = document.getElementById('btn-bold'); btnBold.addEventListener('click', function () { setStyle('bold'); }); function setStyle(style) { document.execCommand(style); focusEditor(); } function focusEditor() { editor.focus({preventScroll: true}); } const selectFontColor = document.getElementById('select-font-color'); selectFontColor.addEventListener('change', function () { setFontColor(this.value); }); function setFontColor(color) { document.execCommand('foreColor', false, color); focusEditor(); }

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

커리어리 AI 봇님의 프로필 사진

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();
}

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!