그럼에도 불구하고

👨‍💻

[React] quill Editor bold체, italic체 적용 안됨 에러 해결 본문

React/React basics

[React] quill Editor bold체, italic체 적용 안됨 에러 해결

zenghyun 2023. 6. 22. 19:29

 

quill Editor에서 bold 체와 italic 체가 적용 안 되는 에러에 대해 알아보겠습니다.

 

 

 

 

📌 전체 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React, { useRef, useEffect } from 'react';
import Quill from 'quill';
import 'quill/dist/quill.bubble.css';
import styled from 'styled-components';
import palette from '../../lib/styles/palette';
import Responsive from '../common/Responsive';
 
const EditorBlock = styled(Responsive)`
  padding-top: 5rem;
  padding-bottom: 5rem;
`;
 
const TitleInput = styled.input`
  font-size: 3rem;
  outline: none;
  padding-bottom: 0.5rem;
  border: none;
  border-bottom: 1px solid ${palette.gray[4]};
  margin-bottom: 2rem;
  width: 100%;
`;
 
const QuillWrapper = styled.div`
  .ql-editor {
    padding: 0;
    min-height: 320px;
    font-size: 1.125rem;
    line-height: 1.5;
  }
 
  .ql-editor b{
    font-weight: bold;
  }
 
  .ql-editor i{
    font-weight: bold;
  }
 
  .ql-editor.ql-blank::before {
    left: 0px;
  }
`;
 
const Editor = ({ title, body, onChangeField }) => {
  const quillElement = useRef(null); // Quill을 적용할 DivElement 설정
  const quillInstance = useRef(null); // Quill 인스턴스를 설정
 
  var bold = Quill.import('formats/bold');
  bold.tagName = 'b';   // Quill uses <strong> by default
  Quill.register(bold, true);
  
  var italic = Quill.import('formats/italic');
  italic.tagName = 'i';   // Quill uses <em> by default
  Quill.register(italic, true);
 
  useEffect(() => {
    quillInstance.current = new Quill(quillElement.current, {
      theme: 'bubble',
      placeholder: '내용을 작성하세요...',
      modules: {
        toolbar: [
          [{ header: '1' }, { header: '2' }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          ['blockquote', 'code-block', 'link', 'image'],
        ],
      },
    });
 
    const quill = quillInstance.current;
 
    quill.setContents([{ insert: '\n' }]);
 
    quill.on('text-change', (delta, oldDelta, source) => {
      if (source === 'user') {
        onChangeField({ key: 'body', value: quill.root.innerHTML });
      }
    });
  }, [onChangeField]);
 
  const onChangeTitle = (e) => {
    onChangeField({ key: 'title', value: e.target.value });
  };
 
  return (
    <EditorBlock>
      <TitleInput
        placeholder="제목을 입력하세요"
        onChange={onChangeTitle}
        value={title}
      />
      <QuillWrapper>
        <div ref={quillElement} />
      </QuillWrapper>
    </EditorBlock>
  );
};
 
export default Editor;
 
cs

 

📌 quill

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 useEffect(() => {
    quillInstance.current = new Quill(quillElement.current, {
      theme: 'bubble',
      placeholder: '내용을 작성하세요...',
      modules: {
        toolbar: [
          [{ header: '1' }, { header: '2' }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          ['blockquote', 'code-block', 'link', 'image'],
        ],
      },
    });
 
    const quill = quillInstance.current;
 
    quill.setContents([{ insert: '\n' }]);
 
    quill.on('text-change', (delta, oldDelta, source) => {
      if (source === 'user') {
        onChangeField({ key: 'body', value: quill.root.innerHTML });
      }
    });
  }, [onChangeField]);
cs

 

 

결론적으로 text를 작성하는 화면에서는 bold채와 italic 체가 적용되었지만 게시글이 작성된 후에 게시글 리스트에서 보이는 게시글에는  bold 체와 italic 체가 적용되지 않았습니다. 

 

📌 게시글 작성 화면

 

 

📌 게시글 리스트 화면

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const Editor = ({ title, body, onChangeField }) => {
  const quillElement = useRef(null); // Quill을 적용할 DivElement 설정
  const quillInstance = useRef(null); // Quill 인스턴스를 설정
 
  var bold = Quill.import('formats/bold');
  bold.tagName = 'b';
  Quill.register(bold, true);
 
  var italic = Quill.import('formats/italic');
  italic.tagName = 'i';
  Quill.register(italic, true);
 
  useEffect(() => {
    quillInstance.current = new Quill(quillElement.current, {
      theme: 'bubble',
      placeholder: '내용을 작성하세요...',
      modules: {
        toolbar: [
          [{ header: '1' }, { header: '2' }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          ['blockquote', 'code-block', 'link', 'image'],
        ],
      },
    });
 
    const quill = quillInstance.current;
 
    quill.setContents([{ insert: '\n' }]);
 
    quill.on('text-change', (delta, oldDelta, source) => {
      if (source === 'user') {
        onChangeField({ key: 'body', value: quill.root.innerHTML });
      }
    });
  }, [onChangeField]);
 
cs

 

코드에 아래와 같이 추가하여 해결하였습니다. 

 

  var bold = Quill.import('formats/bold');
  bold.tagName = 'b';
  Quill.register(bold, true);

  var italic = Quill.import('formats/italic');
  italic.tagName = 'i';
  Quill.register(italic, true);

 

 

 

 

ref: https://stackoverflow.com/questions/43399026/quilljs-replace-strong-with-b

저작자표시 비영리

'React > React basics' 카테고리의 다른 글

[React with TS] PropTypes란?  (0) 2023.06.28
[React] dangerouslySetInnerHTML이란?  (0) 2023.06.28
[React] Server Side Rendering이란?  (1) 2023.06.17
[React-Router-Dom] Link와 NavLink, useNavigate  (0) 2023.06.09
[React] firebase 이용하기  (0) 2023.05.31
'React/React basics' Related Articles more
Comments