Quil 사용하기

오픈소스

Quil 사용하기

Lea_rlo 2022. 4. 10. 13:55

Quickstart - Quill

Quickstart The best way to get started is try a simple example. Quill is initialized with a DOM element to contain the editor. The contents of that element will become the initial contents of Quill. Hello World! Some initial bold text var quill = new Quill

quilljs.com

위의 사이트로 접속하여 코드를 복사한다.

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

기본 설정 결과 :

See the Pen Untitled by LEAhub (@leahub) on CodePen.

var toolbarOptions = [
        [{ 'font': [] }],                                 // 폰트 설정
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 텍스트 크기 설정
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme


        [{ 'align': [] }],                                // 텍스트 정렬
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 리스트 항목
        [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent

        ['blockquote', 'code-block'],                     // 코드블럭, 인용 문구

        ['link', 'image'],                                // 링크, 이미지 추가

        ['clean']                                         // remove formatting button
    ];

    var quill = new Quill('#editor', {
        modules: {
            toolbar: toolbarOptions                       // modules에 toolbar : toolbarOptions를 추가
        },
        theme: 'snow'                                     // 테마는 snow로 설정
    });

전체 코드

<html>
<head>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <style>
        #editor{
            height: 300px;
        }
    </style>
</head>
<body>
<!-- Create the editor container -->
<div id="editor">

</div>

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
    var toolbarOptions = [
        [{ 'font': [] }],                                 // 폰트 설정
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 텍스트 크기 설정
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme


        [{ 'align': [] }],                                // 텍스트 정렬
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 리스트 항목
        [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent

        ['blockquote', 'code-block'],                     // 코드블럭, 인용 문구

        ['link', 'image'],                                // 링크, 이미지 추가

        ['clean']                                         // remove formatting button
    ];

    var quill = new Quill('#editor', {
        modules: {
            toolbar: toolbarOptions                       // modules에 toolbar : toolbarOptions를 추가
        },
        theme: 'snow'                                     // 테마는 snow로 설정
    });
</script>

</body>
</html>

박스 크기를 설정하고 싶으면 style을 주면 된다.

See the Pen Untitled by LEAhub (@leahub) on CodePen.

위에 입력한 사이트에서 더 많은 정보를 알 수 있으니 참고하도록!