Использование quill.js

19.07.2017 at 21:57


quill.js — это браузерный редактор текста, имеющий достаточно простое API. Встраивается он очень просто.

Сначала нужно подключить библиотеку

<script src="http://cdn.quilljs.com/1.3.0/quill.min.js"></script>
<link href="http://cdn.quilljs.com/1.3.0/quill.snow.css" rel="stylesheet">

Если планируется использовать редактор формул, то нужно так же подключить KaTeX

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>

Теперь инициализируем редактор

var quill = new Quill('#text-editor', {
  modules: {
    formula: true,
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['image', 'blockquote', 'code-block'],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'indent': '-1'}, { 'indent': '+1' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['formula'],
      ['clean']     
    ]
  },
  placeholder: 'Write your text here',
  theme: 'snow'
});

Первым параметром передается селектор элемента, который будет контейнером для редактора. Так же передается конфиг, в котором перечислены используемые модули, кнопки тулбара и прочее.

Получить доступ к тексту можно например следующим образом:

quill.root.innerHTML

Из коробки quill поставляется с двумя темами:
snow — классический редактор с тулбаром сверху редактора
bubble — тулбар всплывает над выделенным текстом

Выглядит редактор так:


Tags: