ツールバー モジュールを使用すると、ユーザーは 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'
}
});
ツールバー コントロールは、形式名の単純な配列またはカスタム HTML コンテナーのいずれかで指定できます。
より単純な配列オプションから始めるには:
var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
}
});
コントロールは、配列の 1 レベルのネストによってグループ化することもできます。これにより、コントロールがラップされます。<span>クラス名付きql-formats、テーマを利用するための構造を提供します。例えば雪コントロールグループ間に余分なスペースを追加します。
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' ]}
];
ノートテーマドロップダウンのデフォルト値を指定することもできます。例えば、雪35 色のデフォルトのリストを提供します。colorとbackground空の配列に設定されている場合は、フォーマットされます。
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クラスがツールバーコンテナに追加され、Quille が適切なハンドラをツールバーコンテナにアタッチします。<button>と<select>フォーム内のクラス名を持つ要素ql-${format}。 Buttons 要素には、オプションでカスタムを含めることができます。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>
ツールバー コントロールはデフォルトで書式設定を適用および削除しますが、たとえば外部 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);