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

工具栏模块允许用户容易的设置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属性。

<!-- Create toolbar container -->
<div id="toolbar">
  <!-- Add font size dropdown -->
  <select class="ql-size">
    <option value="small"></option>
    <!-- Note a missing, thus falsy value, is used to reset to default -->
    <option selected></option>
    <option value="large"></option>
    <option value="huge"></option>
  </select>
  <!-- Add a bold button -->
  <button class="ql-bold"></button>
  <!-- Add subscript and superscript buttons -->
  <button class="ql-script" value="sub"></button>
  <button class="ql-script" value="super"></button>
</div>
<div id="editor"></div>

<!-- Initialize editor with toolbar -->
<script>
  var quill = new Quill('#editor', {
    modules: {
      toolbar: '#toolbar'
    }
  });
</script>

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

<div id="toolbar">
  <!-- Add buttons as you would before -->
  <button class="ql-bold"></button>
  <button class="ql-italic"></button>

  <!-- But you can also add your own -->
  <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。添加自定义处理程序将覆盖默认的工具栏和主题行为。

var toolbarOptions = {
  handlers: {
    // handlers object will be merged with default handlers object
    'link': function(value) {
      if (value) {
        var href = prompt('Enter the URL');
        this.quill.format('link', href);
      } else {
        this.quill.format('link', false);
      }
    }
  }
}

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  }
});

// Handlers can also be added post initialization
var toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', showImageUI);