Quill 에디터 사용법

Admin 2020.03.16 10:12 조회 수 : 108

참고 사이트 : https://quilljs.com/docs/quickstart/

 

1. 스타일 등록

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

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

 

2. 스크립트 등록

<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>

<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

 

3. HTML 컨테이너 추가 

<div id="editor">

  <p>Hello World!</p>

  <p>Some initial <strong>bold</strong> text</p>

  <p><br></p>

</div>

 

4. 스크립트 추가

<script type="text/javascript">

var quill = new Quill('#editor', {

  modules: {

    toolbar: [

      [{ header: [1, 2, false] }],

      ['bold', 'italic', 'underline'],

      ['image', 'code-block']

    ]

  },

  placeholder: 'Compose an epic...',

  readOnly: true,

  theme: 'snow'  // or 'bubble'

});

 

// 폼(input)에 자동저장

quill.on('text-change', function() {

  var delta = quill.getContents();

  var text = quill.getText();

  var justHtml = quill.root.innerHTML;

  $('input[name="content"]').val(JSON.stringify(justHtml));

  console.log(JSON.stringify(delta['ops']));

});

</script>