如何创建与示例中所示完全相同的 QuillJS 工具栏？

问题描述 投票：0回答：4

在此页面的顶部，据称给出了如何创建工具栏来控制字体、大小、粗体、斜体、下划线、删除线、文本颜色、背景颜色、列表、项目符号和文本对齐方式的说明.

但是，当我使用示例 HTML 代码时，我会看到一个带有字体大小的下拉菜单，以及一个空白按钮，其中没有文本或图像，也没有其他控件。

如何准确复制上页和主页上显示的完整工具栏？我不需要“粗体”、“斜体”等词语。我想要的图标与所示的完全一样。该文档没有提供任何关于如何完成此操作的线索。直接查看页面源代码，屏幕后面似乎添加了一些 CSS 来记录这一点，但尝试逆向工程并不能解决问题。

此外，是否可以以编程方式生成此工具栏，而无需设置一系列复杂的带有类和标题的嵌套标签等等？我使用 Javascript 生成 DOM，尝试将精确的 HTML 格式转换为相应的构造函数调用非常乏味。

quill
4个回答
8
投票
有一大块 jsx 代码描述了一个鹅毛笔工具栏，通过该代码，您应该获得与官方鹅毛笔网站上的第二个示例完全相同的工具栏。我认为这篇文章对那些不想挖掘资源的人会有帮助。

<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>
2
投票
抱歉造成混乱。如果您希望工具栏具有该页面上显示的皮肤，则还需要包含主题和关联的样式表：

<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>
没有它，您仍然可以获得工具栏功能，以便您可以应用自己的样式。

我将更新文档以使其更加清晰。

0
投票
对于颜色选择器，需要创建一个包含所有选项的

<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>
0
投票

JS版本：

const quill = new Quill('#editor', { theme: 'snow', modules: { toolbar: [ [{ 'header': [1, 2, 3, 4, 5, 6, false] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }], [{ 'script': 'sub'}, { 'script': 'super' }], ['blockquote', 'code-block'], [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'indent': '-1'}, { 'indent': '+1' }, { 'direction': 'rtl' }, { 'align': [] }], ['link', 'image', 'video', 'formula'], ['clean'], ], }, }) 
HTML 版本：

<div>
  <div id="toolbar">
    <!--[{ 'header': [1, 2, 3, 4, 5, 6, false] }]-->
    <span class="ql-formats">
      <select class="ql-header">
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option selected></option>
      </select>
    </span>

    <!--['bold', 'italic', 'underline', 'strike']-->
    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>

    <!--[{ 'color': [] }, { 'background': [] }]-->
    <span class="ql-formats">
     <select class="ql-color"></select>
     <select class="ql-background"></select>
    </span>

    <!--[{ 'script': 'sub'}, { 'script': 'super' }]-->
    <span class="ql-formats">
      <button class="ql-script" value="sub"></button>
      <button class="ql-script" value="super"></button>
    </span>

    <!--['blockquote', 'code-block']-->
    <span class="ql-formats">
      <button class="ql-blockquote"></button>
      <button class="ql-code-block"></button>
    </span>

    <!--[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'indent': '-1'}, { 'indent': '+1' }, { 'direction': 'rtl' }, { 'align': [] }]-->
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <button class="ql-indent" value="-1"></button>
      <button class="ql-indent" value="+1"></button>
      <button class="ql-direction" value="rtl"></button>
      <select class="ql-align">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
    </span>

    <!--['image', 'video', 'formula', 'link']-->
    <span class="ql-formats">
      <button class="ql-image"></button>
      <button class="ql-video"></button>
      <button class="ql-formula"></button>
      <button class="ql-link"></button>
    </span>

    <!--['clean']-->
    <span class="ql-formats">
      <button class="ql-clean"></button>
    </span>
  </div>

  <div id="editor"></div>
</div>

（+）


const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: {
      container: '#toolbar'
    },
  },
})

    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.