LoginSignup
0
0

Quill.jsでツールバーのデフォルトのアイコンを書き換える方法

Posted at

Quill.import('ui/icons');を利用して、アイコンの表示内容を書き換えられる。

<div class="toolbar">
  <button type="button" class="ql-underline"></button>
</div>
<div class="editor"></div>
var icons = Quill.import('ui/icons');
 // ここではSVGを利用しているが、もちろんFontAwesomeなどのアイコンを利用することも可能
icons['underline'] = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="red" version="1.1" id="Icons" viewBox="0 0 32 32" xml:space="preserve"><g><path d="M29,27H3c-0.6,0-1,0.4-1,1s0.4,1,1,1h26c0.6,0,1-0.4,1-1S29.6,27,29,27z"/><path d="M5,24h4c0.6,0,1-0.4,1-1s-0.4-1-1-1H8.6l1.9-4h11.1l1.9,4H23c-0.6,0-1,0.4-1,1s0.4,1,1,1h4c0.6,0,1-0.4,1-1s-0.4-1-1-1   h-1.4L16.9,3.6C16.7,3.2,16.4,3,16,3s-0.7,0.2-0.9,0.6L6.4,22H5c-0.6,0-1,0.4-1,1S4.4,24,5,24z M16,6.3l4.6,9.7h-9.2L16,6.3z"/></g></svg>';

// Quill初期化処理
const editor = document.querySelector('.editor');
const toolbar = document.querySelector('.toolbar');
const quill = new Quill(editor, {
    theme: 'snow',
    modules: {
        toolbar: toolbar,
    }
});
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0