🙆

Quill 独自クラスを付けたり外したりする方法 How to Add or Remove Quill Custom Classes

2025/09/11に公開

2025/09/14

選択した場所を取得できる関数と、
その範囲にスタイルをあてる関数がある。
それを使ってトグル機能を実装する。

まずは、準備として、カスタム要素を作成する

種類として、ブロックと、インラインがある。
今回はブロックを使う。

準備


const Block = Quill.import('blots/block');


class Image50 extends Block {
  static blotName = 'image50';
  static tagName = 'div';
  static className = 'image50';
}



Quill.register(Image50);

インラインは参考までに

const Inline = Quill.import('blots/inline');

class BoldBlot extends Inline {
  static blotName = 'bold';
  static tagName = 'strong';
}

class ItalicBlot extends Inline {
  static blotName = 'italic';
  static tagName = 'em';
}


Quill.register(BoldBlot);
Quill.register(ItalicBlot);

以下css
.image50 (生成される要素)の、img横幅を49％にする。

 .container .ql-editor .image50 img{
    width: 49% !important;
    height: auto;
    
     }

クラス付きブロックが追加されますので、その中の要素にしっかりとスタイルが当たるようにしてください。
変化をブラウザの開発者ツールで見ながら進めていただくと、
理解が深まると思います。

以下コード
雰囲気をつかむ程度でみてください。
コピペで動きません。


const Block = Quill.import('blots/block');


class Image50 extends Block {
  static blotName = 'image50';
  static tagName = 'div';
  static className = 'image50';
}



Quill.register(Image50);

// Quillエディタを初期化
const quill_left = new Quill('#editor-left', {
    modules: {
        toolbar: {
            container: '#toolbar-container-left',
            
            handlers: {
                
                'test':() => test_func()
            }
        },
        
    theme: 'snow'
});
function test_func(){
    console.log("実行したよ");


const range = quill_left.getSelection();
  if (!range) return;

  const formats = quill_left.getFormat(range.index, range.length);
  console.log("formats:", formats);

  if (formats.image50) {
    quill_left.formatLine(range.index, range.length, 'image50', false);
  } else {
    quill_left.formatLine(range.index, range.length, 'image50', true);
  }
        
   


}

躓きやすいポイントとして、インラインは、

quill_left.formatText(range.index, range.length, 'image50', true);

関数名が、textになるので注意。

true,falseでつけたり外したりできるらしい。

もし、このコードを参考にして、きれいなコードができたら、

記事を書いてほしい。

Quillはまだ情報が少なく、始めづらい。

まずはこの記事を参考に、コードをきれいにして、自身で投稿するところから始めてほしい。

実際の仕様がわからなくなったら、QUillのドキュメントを確認してください。
関数名はわかっているので、迷わずに確認ができると思います。

https://quilljs.com/docs/api#content

追記

今現在開発中。

こういった書き方もできるようです。

function quill_toggle(_element, _classname) {
    console.log("ボタンの実行をしたよ");


    const range = _element.getSelection();
    if (!range) return;

    const formats = _element.getFormat(range.index, range.length);
    console.log("formats:", formats[_classname]);


    if (formats[_classname]) {
        _element.format(_classname, false);
    } else {
        _element.format(_classname, true);
    }



}

注意

引数の_classnameは、注意が必要です。
Quill用の名前を入力する必要があります。

quillに登録している名前とクラス名を同じ名前で登録しているので、そう書いてしまっている。実際は、違うので注意

追記

注意

Discussion