Configuration(환경설정)
Quill을 사용하면 사용자가 원하는 방향으로 세팅할 수 있습니다. 이 섹션은 기존 기능을 조정하는 데만 사용됩니다. 새 기능을 추가하려면 모듈 섹션을, 스타일링하려면 테마 섹션을 참조하십시오.
Container
Quill에서는 에디터를 포함할 컨테이너가 필수적으로 필요합니다. 이 컨테이너에 CSS selector나 DOM Object를 전달할 수 있습니다. DOM element를 container로 지정하고 Quill 인스턴스를 만들면 container안에 에디터가 삽입됩니다.
첫번째 방법
const editor = new Quill('.editor'); // 첫번째 DOM element에 적용된다.두번째 방법
const container = document.getElementById('editor');
const editor = new Quill(container);Options
Quill을 세팅하려면 옵션 객체를 전달하면 됩니다.
const options = {
debug: 'info',
modules: {
toolbar: '#toolbar'
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
};
const editor = new Quill('#editor', options);다음 객체 key를 옵션으로 사용할 수 있습니다.
bounds
기본 값: document.body
툴팁 같은 에디터의 요소를 제한하는 범위이다.
debug
기본 값: warn
debug의 단축 옵션이다. 로그 메시지를 어떻게 받을 것인지를 설정할 수 있다. 기본 값은 warn이며 그 외에는 error, log, info가 있다.
format
기본 값: 모든 형식
에디터에서 허용하는 포멧을 지정합니다. 아무것도 지정하지 않을 경우 모든 포멧을 허용 합니다. 여기서 포멧의 종류를 확인할 수 있습니다.
modules
포함할 모듈을 지정합니다. 여기서 Module의 정보를 더 확인할 수 있습니다.
placeholder
기본 값: 없음
에디터가 비었을 때 보여줄 텍스트입니다.
readOnly
Default: false
에디터를 읽기 전용으로 할 것인지에 대한 옵션입니다.
scrollingContainer
Default: null
DOM Element or a CSS selector for a DOM Element, specifying which container has the scrollbars (i.e. overflow-y: auto), if is has been changed from the default ql-editor with custom CSS. Necessary to fix scroll jumping bugs when Quill is set to auto grow its height, and another ancestor container is responsible from the scrolling.
theme
사용할 테마를 지정하면 됩니다. Quill에서 기본적으로 제공하는 테마는 "bubble"과 "snow"가 있습니다. 값이 잘못되거나 false일 경우 기본 테마가 로드됩니다. 테마의 CSS는 link tag를 이용해 수동으로 넣어야 합니다. 자세한 내용은 테마를 참조하십시오.
