Использование quill.js
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 — тулбар всплывает над выделенным текстом
Выглядит редактор так: