React-Quill을 활용한 구현 예제

이전 포스팅 : https://whaleinmilktea.tistory.com/80

참조 블로그 : https://velog.io/@onezerokang/Quill%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%97%90%EB%94%94%ED%84%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0-Quickstart1

Quill을 사용해서 텍스트 에디터 만들기: Quickstart(#1)

Quill을 활용하여 구현하고자 하는 예제:

* Table 및 Image 삽입 구현은,, 나중에 추가로 도전!!!

npm에서 quill-better-table과 quill-image-uploader를 찾고, 이를 적용해보려고 했으나 에디터 외에도 axios 통신 등 더 어렵고 중요한 과제가 산적해 있어서, 이는 다음으로 미루기로 했다.. (어쩌면 그때는 quill이 아닌 다른 에디터를 활용해서 도전할 수도 있지만..)

 

다음은 데이터 통신을 위해 quill에서 작업한 결과물을 console.log()에 찍어볼 차례이다.

console.log()에 정확하게 데이터가 전달될 수만 있고, axios 통신에서 Cors 설정과 uri 통신만 명확하다면 이제 사용자가 작성한 데이터는 서버를 통해 전송되고, 저장되며, 또 다른 페이지를 레더링할 때 사용되는 데이터로 쓸 수 있게 될 것이다.

 

에디터에서 작성한 내용을 Submit하기 위한 button요소 및 form요소로 묶고 상태관리하기

1. ReactQuill 컴포넌트에서 작성한 내용을 데이터로 전달하기 위해 form 요소와 button 요소를 활용해서 전달한다.
2. 전달한 데이터는 일단 useState 상태관리에 넣어서 관리한다.
3. 현재 상태를 console.log()로 출력한다.

위의 3개의 과정이 이번 포스팅의 목표이다.

 

먼저 Styled-Component를 활용하여 button과 form 요소를 생성하고 묶어야겠다.

import { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import styled from 'styled-components';

const SubmitForm = styled.form``;
const SubmitBtn = styled.button``;

const modules = {
	...
};

const formats = [
	...
];

function QuillEditor() {
  const [content, setContent] = useState('');

  const handleChange = (value) => {
    setContent(value);
  };

  return (
    <div className="quill-editor">
      <SubmitForm>
        <ReactQuill
			...
        />
        <SubmitBtn>Submit</SubmitBtn>
      </SubmitForm>
    </div>
  );
}

export default QuillEditor;

 

이후 이벤트 핸들러 함수를 추가해서 제출한 내용이 어떤 데이터로 담기는지 확인한다.

import { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import styled from 'styled-components';

const SubmitForm = styled.form``;
const SubmitBtn = styled.button``;

const modules = {
	...
};

const formats = [
	...
];

function QuillEditor() {
  const [content, setContent] = useState('');

  const handleChange = (value) => {
    setContent(value);
  };

  const handleSubmit = (event) => {
    event.preventDefault(); // form submit 이벤트의 기본 동작 방지
    console.log(content); // 현재 content 값을 콘솔에 출력
  };

  return (
    <div className="quill-editor">
      <SubmitForm onSubmit={handleSubmit}>
        <ReactQuill
			...
        />
        {/* 버튼의 타입을 지정 */}
        <SubmitBtn type="submit">Submit</SubmitBtn>
      </SubmitForm>
    </div>
  );
}

export default QuillEditor;

 

마지막으로 npm run start로 연 dev 서버에서 정확하게 데이터가 담기는지 확인한다.

다음은 구현 결과물과 결과물에 따른 console.log()에 찍힌 데이터이다.

<h1>안녕하세요</h1>
<p><strong>안녕하세요</strong></p>
<p><span class="ql-font-serif">안녕하세요</span></p>
<p><em>안녕하세요</em></p>
<p><u>안녕하세요</u></p>
<p><s>안녕하세요</s></p>
<blockquote>안녕하세요</blockquote>
<ol>
  <li>안녕하세요</li>
</ol>
<ul>
  <li>안녕하세요</li>
</ul>
<p class="ql-indent-1">안녕하세요</p>
<p>
  <a href="www.google.com" rel="noopener noreferrer" target="_blank"
    >안녕하세요</a
  >
</p>
<p><span style="color: rgb(230, 0, 0)">안녕하세요</span></p>
<p><span style="background-color: rgb(255, 235, 204)">안녕하세요</span></p>
<p class="ql-align-justify">안녕하세요</p>
<p><code>&lt;input&gt;</code></p>
<p>const Hello = () =&gt; {</p>
<p>console.log("안녕하세요")</p>
<p>}</p>