エディタ『Quill』のメニューボタンをカスタマイズする【Laravel】

この記事では、カスタムメニューボタンを追加する方法を解説します。

Quillにメニューボタンを追加する

Quillには、デフォルトで搭載されていないカスタムメニューボタンを追加することができます。例として、メニューボタンを追加するコードを書いてみます。

// Quillのモジュールを読み込む
import Quill from 'quill';

// カスタムボタンの定義
class CustomButton {
  constructor() {
    const toolbar = Quill.import('ui/components/toolbar');
    toolbar.register(CustomButton, true);
  }
  
  // カスタムボタンのアイコンを返す
  static get icon() {
    return '<i class="fa fa-star"></i>';
  }
  
  // カスタムボタンがクリックされた際の処理
  clickHandler() {
    // カスタム処理を記述
    console.log('カスタムボタンがクリックされました！');
  }
}

// Quillにカスタムボタンを追加
Quill.register('modules/customButton', CustomButton);

// Quillを初期化
const quill = new Quill('#editor', {
  // プラグインを有効化
  modules: {
    toolbar: ['customButton'],
  },
});

 

メニューボタンのCSSスタイルを変更する

メニューボタンを追加したら、CSSスタイルを適用してみます。例として、ボタンのアイコンサイズや色を変更するCSS例です。

/* カスタムボタンのアイコンサイズを変更 */
.ql-customButton .ql-fill {
  font-size: 20px;
}

/* カスタムボタンの色を変更 */
.ql-customButton .ql-fill {
  color: #FF0000;
}

 

メニューボタンにJavaScriptを追加する

カスタムボタンに機能を持たせることもできます。例として、クリック時にユーザーにメッセージを表示するJavaScriptを書いてみます。

clickHandler() {
  // ユーザーにメッセージを表示
  alert('カスタムボタンがクリックされました！');
}

 

まとめ

この記事では、カスタムメニューボタンを追加する方法を解説しました。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...