Как создать панель инструментов QuillJS точно так, как показано в примерах?

В верхней части этой страницы якобы приведены инструкции по созданию панели инструментов. для управления шрифтом, размером, полужирным шрифтом, курсивом, подчеркиванием, зачеркиванием, цветом текста, цветом фона, списком, маркером и выравниванием текста.

Однако, когда я использую пример HTML-кода, я получаю раскрывающееся меню с размерами шрифта и пустую кнопку без текста или изображения в ней и без других элементов управления.

Как мне точно воспроизвести всю панель инструментов, показанную как на приведенной выше странице, так и на главной? Мне не нужны слова «Полужирный», «Курсив» и т. Д. Я хочу, чтобы значки были точно такими, как показано. Документация не дает никаких подсказок относительно того, как это сделать. При прямом взгляде на исходный код страницы кажется, что за экранами есть некоторый добавленный CSS для документирования этого, но попытка реконструировать его не собирается.

Кроме того, возможно ли сгенерировать эту панель инструментов программно без необходимости настраивать сложную серию вложенных тегов с классами, заголовками и т. Д.? Я создаю модель DOM с помощью Javascript, и очень утомительно пытаться преобразовать точный формат HTML в соответствующие вызовы конструктора.


quill
person Michael    schedule 12.01.2016    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Есть кусок jsx-кода, который описывает панель инструментов quill, с которой вы должны получить панель инструментов точно так же, как во втором примере на официальном веб-сайте quill. Думаю, этот пост будет полезен тем, кто не хочет копаться в источниках.

<div id="full-toolbar" className="toolbar ql-toolbar ql-snow">
    <span className="ql-format-group">
        <select title="Font" className="ql-font" defaultValue="sans-serif">
            <option value="sans-serif">Sans Serif</option>
            <option value="serif">Serif</option>
            <option value="monospace">Monospace</option>
        </select>
        <select title="Size" className="ql-size" defaultValue="13px">
            <option value="10px">Small</option>
            <option value="13px">Normal</option>
            <option value="18px">Large</option>
            <option value="32px">Huge</option>
        </select>
    </span>
    <span className="ql-format-group">
        <span title="Bold" className="ql-format-button ql-bold"/>
        <span className="ql-format-separator"/>
        <span title="Italic" className="ql-format-button ql-italic"/>
        <span className="ql-format-separator"/>
        <span title="Underline" className="ql-format-button ql-underline"/>
        <span className="ql-format-separator"/>
        <span title="Strikethrough" className="ql-format-button ql-strike"/>
    </span>
    <span className="ql-format-group">
        <select title="Text Color" className="ql-color" defaultValue="rgb(0, 0, 0)">
          <option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"/>
          <option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"/>
          <option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"/>
          <option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"/>
          <option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"/>
          <option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"/>
          <option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"/>
          <option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"/>
          <option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"/>
          <option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"/>
          <option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"/>
          <option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"/>
          <option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"/>
          <option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"/>
          <option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"/>
          <option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"/>
          <option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"/>
          <option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"/>
          <option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"/>
          <option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"/>
          <option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"/>
          <option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"/>
          <option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"/>
          <option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"/>
          <option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"/>
          <option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"/>
          <option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"/>
          <option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"/>
          <option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"/>
          <option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"/>
          <option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"/>
          <option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"/>
          <option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"/>
          <option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"/>
        </select>
        <span className="ql-format-separator"/>
        <select title="Background Color" className="ql-background" defaultValue="rgb(255, 255, 255)">
            <option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"/>
            <option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"/>
          <option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"/>
          <option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"/>
          <option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"/>
          <option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"/>
          <option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"/>
          <option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)"/>
          <option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"/>
          <option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"/>
          <option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"/>
          <option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"/>
          <option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"/>
          <option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"/>
          <option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"/>
          <option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"/>
          <option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"/>
          <option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"/>
          <option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"/>
          <option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"/>
          <option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"/>
          <option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"/>
          <option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"/>
          <option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"/>
          <option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"/>
          <option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"/>
          <option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"/>
          <option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"/>
          <option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"/>
          <option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"/>
          <option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"/>
          <option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"/>
          <option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"/>
          <option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"/>
          <option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"/>
        </select>
    </span>
    <span className="ql-format-group">
        <span title="List" className="ql-format-button ql-list"/>
        <span className="ql-format-separator"/>
        <span title="Bullet" className="ql-format-button ql-bullet"/>
        <span className="ql-format-separator"/>
    <select title="Text Alignment" className="ql-align" defaultValue="left">
      <option value="left" label="Left"/>
      <option value="center" label="Center"/>
      <option value="right" label="Right"/>
      <option value="justify" label="Justify"/>
    </select>
    </span>
  <span className="ql-format-group">
    <span title="Link" className="ql-format-button ql-link"/>
  </span>
</div>
person Eugeny    schedule 11.04.2016

arrow_upward
2
arrow_downward

Извините за путаницу. Если вы хотите, чтобы панель инструментов со скином выглядела как показано на этой странице, также необходимо включить тему и связанную таблицу стилей:

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

<script>
  var editor = new Quill('#editor', { theme: 'snow' });
  editor.addModule('toolbar', {
    container: '#toolbar'     // Selector for toolbar container
  });
</script>

Без него вы все равно получите функциональность панели инструментов, чтобы вы могли применить свой собственный стиль.

Я обновлю документы, чтобы прояснить это.

person jhchen    schedule 12.01.2016
comment
похоже, мне нужно сделать больше, чем настроить размер шрифта и полужирные элементы, показанные в примере. Я настроил большую часть этого, но некоторые элементы управления, такие как имя шрифта, список, маркер, выравнивание текста и цвета, не работают, поэтому образец HTML, необходимый для его настройки, будет полезен. Я пробовал проверять и дублировать элементы на странице, используя указанные имена классов. Я не уверен, например, с цветом / фоном, должен ли я сам настраивать палитру цветов или если он должен был создать его для меня - на данный момент у меня появился значок, но цвета не выпадают. Аналогично шрифту .. - person Michael; 12.01.2016
comment
Для раскрывающихся списков вам необходимо указать тег ‹select› с заполненными ‹option›. Quill будет дублировать и отзеркаливать те ‹option› s. - person jhchen; 14.01.2016
comment
Спасибо, теперь почти все работает, и стиль имитирует пример. Осталось только то, что он не создает границу тени вокруг панели инструментов и редактора, на самом деле на первый взгляд даже не очевидно, где находится редактируемый Div . Я копирую оболочку дословно с главной страницы, например Класс панели инструментов - это панель инструментов ql-toolbar q-snow. Что это генерирует? - person Michael; 26.01.2016
comment
Хорошо, похоже, чтобы получить этот эффект, мне нужно включить таблицу стилей на //quilljs.com/css/styles.css, но это не часть CDN ... - person Michael; 26.01.2016

arrow_upward
0
arrow_downward

Для палитры цветов необходимо создать <select />, содержащий все параметры.

<select class="ql-color">
    <option value="rgb(0, 0, 0)" />
    <option value="rgb(230, 0, 0)" />
    <option value="rgb(255, 153, 0)" />
    <option value="rgb(255, 255, 0)" />
    <option value="rgb(0, 138, 0)" />
    <option value="rgb(0, 102, 204)" />
    <option value="rgb(153, 51, 255)" />
    <option value="rgb(255, 255, 255)" />
    <option value="rgb(250, 204, 204)" />
    <option value="rgb(255, 235, 204)" />
    <option value="rgb(204, 224, 245)" />
    <option value="rgb(235, 214, 255)" />
    <option value="rgb(187, 187, 187)" />
    <option value="rgb(102, 185, 102)" />
</select>
person Ke.    schedule 07.03.2016