quill.js官方文档(七)【Module之Toolbar】

淩亂°似流年 2021-07-05 01:45 520阅读 0赞

工具栏模块允许用户容易的设置Quill的内容格式。

可以用自定义的容器和处理程序定义。

var quill = new Quill('#editor', { 
      modules: { 
        toolbar: { 
          container: '#toolbar',  // Selector for toolbar container
          handlers: { 
            'bold': customBoldHandler
          }
        }
      }
    });

因为`container`选项是非常通用的，允许在上一级简写。

var quill = new Quill('#editor', { 
      modules: { 
        // Equivalent to { toolbar: { container: '#toolbar' }}
        toolbar: '#toolbar'
      }
    });

## Container容器 ##

工具栏控件即可以用一个格式名称数组定义，也可以用一般的HTML容器定义。

首先使用简单的数组选项：

var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];
    
    var quill = new Quill('#editor', { 
      modules: { 
        toolbar: toolbarOptions
      }
    });

控件也可以按嵌套数组的同一级别分组。将会用带有类名`ql-formats`的`<span>`包裹控件，提供给主题使用。例如，主题`Snow`在控件组之间添加了额外的间距。

var toolbarOptions = [['bold', 'italic'], ['link', 'image']];

自定义的按钮可以用带有作为它唯一键值的格式名称组成的对象来定义。

var toolbarOptions = [{  'header': '3' }];

类似的，下拉菜单也是用对象定义，但是一用可能值组成的数组来定义。`CSS`被用作控制下拉菜单的可视标签。

// Note false, not 'normal', is the correct value
    // quill.format('size', false) removes the format,
    // allowing default styling to work
    var toolbarOptions = [
      {  size: [ 'small', false, 'large', 'huge' ]}
    ];

注意，主题也可以定义下拉菜单的默认值。例如，如果下拉菜单被设置成空数组，`Snow` 主题默认提供 `color` 和 `background` 格式的35种颜色列表供选择。

var toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],
    
      [{  'header': 1 }, {  'header': 2 }],               // custom button values
      [{  'list': 'ordered'}, {  'list': 'bullet' }],
      [{  'script': 'sub'}, {  'script': 'super' }],      // superscript/subscript
      [{  'indent': '-1'}, {  'indent': '+1' }],          // outdent/indent
      [{  'direction': 'rtl' }],                         // text direction
    
      [{  'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
      [{  'header': [1, 2, 3, 4, 5, 6, false] }],
    
      [{  'color': [] }, {  'background': [] }],          // dropdown with defaults from theme
      [{  'font': [] }],
      [{  'align': [] }],
    
      ['clean']                                         // remove formatting button
    ];
    
    var quill = new Quill('#editor', { 
      modules: { 
        toolbar: toolbarOptions
      },
      theme: 'snow'
    });

如果用户案例需要更多的定制，你可以用HTML手动创建一个工具栏，然后传入`DOM`元素或选择器到Quill。工具栏容器将添加`ql-toolbar`类，Quill附加合适的处理程序给带有`ql-${format}`格式类名的 `<button>` 和`<select>` 元素。 按钮元素可选设置一个自定义 `value`属性。

<div id="toolbar">
      
      <select class="ql-size">
        <option value="small"></option>
        
        <option selected></option>
        <option value="large"></option>
        <option value="huge"></option>
      </select>
      
      <button class="ql-bold"></button>
      
      <button class="ql-script" value="sub"></button>
      <button class="ql-script" value="super"></button>
    </div>
    <div id="editor"></div>
    
    
    <script> var quill = new Quill('#editor', { modules: { toolbar: '#toolbar' } }); </script>

注意，如果你提供自己的HTML元素，`Quill`会搜索特定输入的元素，与`Quill`无关的，你自己输入的元素仍然可以添加、设置样式、共存。

<div id="toolbar">
      
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
    
      
      <button id="custom-button"></button>
    </div>
    <div id="editor"></div>
    
    <script> var quill = new Quill('#editor', { modules: { toolbar: '#toolbar' } }); var customButton = document.querySelector('#custom-button'); customButton.addEventListener('click', function() { console.log('Clicked!'); }); </script>

## Handlers ##

工具栏空间默认定义应用和删除格式，但是你也可以用自定义处理程序重写，例如为了显示外部UI。

处理程序函数将始终绑定到工具栏(所以使用`this`指的是工具栏实例)，并在对应格式没有激活下传入`value`值，否则传入`false`。添加自定义处理程序将覆盖默认的工具栏和主题行为。