0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

QuillEditorでデフォルトの動作を無効化したい時

Last updated at Posted at 2025-10-10

・デフォルトの動作とは?

Tabでインデントしたり、”1.”のあとにスペースいれたらリストに変換したり、コードブロック内で改行2回押すとコードブロックを終了したりするやつです

それぞれ以下のようにbindingsに設定します

  const quill = new Quill('#editor', {
    modules: {
      syntax: true,
      toolbar: '#toolbar-container',
      keyboard: {
            bindings: {
              "tab": false, // tab無効
              "list autofill": false, // リスト変換無効
              "code exit": false, // コードブロック改行のやつ無効
            },
      }
    },
    placeholder: 'Compose an epic...',
    theme: 'snow',
  });

これでデフォルトのbindingsを上書きできます

falseの場合bindingsを追加しないようになっているので動作も問題なさそうです

じゃぁどこからこの名前(code exitとか)を見つけてくるかというとソース読みます

keyboard.tsのdefaultOptionsのキーが該当します

とりあえず現時点でのbinding一覧をAIにテーブル化してもらいました↓

Quill キーボードバインディング一覧

カテゴリ バインディング名 キー 説明
テキストフォーマット bold Ctrl+B (Mac: Cmd+B) テキストを太字にする
テキストフォーマット italic Ctrl+I (Mac: Cmd+I) テキストを斜体にする
テキストフォーマット underline Ctrl+U (Mac: Cmd+U) テキストに下線を引く
インデント indent Tab blockquote、indent、listの行頭でインデントを増やす
インデント outdent Shift+Tab blockquote、indent、listの行頭でインデントを減らす
インデント outdent backspace Backspace indent/listの行頭でBackspaceを押すとインデント/リストを解除
コードブロック indent code-block Tab コードブロック内でタブを挿入してインデント
コードブロック outdent code-block Shift+Tab コードブロック内でタブを削除してアウトデント
コードブロック remove tab Shift+Tab 行末のタブ文字の直後でShift+Tabを押すとタブを削除
コードブロック code exit Enter コードブロックで連続した空行でEnterを押すとコードブロックを終了
Tab文字 tab Tab 通常の場所でタブ文字を挿入(テーブル内を除く)
Enter blockquote empty enter Enter 空のblockquote行でEnterを押すとblockquoteを解除
Enter list empty enter Enter 空のリスト行でEnterを押すとリストを解除
Enter checklist enter Enter チェックリスト内でEnterを押すと新しい未チェック項目を作成
Enter header enter Enter ヘッダー行末でEnterを押すと次の行のヘッダーを解除
テーブル table backspace Backspace テーブルセル先頭でのBackspaceを無効化(空ハンドラ)
テーブル table delete Delete テーブルセル末尾でのDeleteを無効化(空ハンドラ)
テーブル table enter Enter テーブル内でEnterを押すとテーブルの前後に改行を挿入
テーブル table tab Tab / Shift+Tab テーブル内でTabを押すと次のセルに移動、Shift+Tabで前のセルに移動
テーブル table down ArrowDown テーブル内で下のセルに移動
テーブル table up ArrowUp テーブル内で上のセルに移動
リスト list autofill Space 1.-*[ ][x]の後にスペースを入力するとリストに変換
埋め込み要素 embed left ArrowLeft 埋め込み要素の左端で左矢印を押すと埋め込み要素の前に移動
埋め込み要素 embed left shift Shift+ArrowLeft 埋め込み要素の左端でShift+左矢印を押すと埋め込み要素を選択範囲に含める
埋め込み要素 embed right ArrowRight 埋め込み要素の右端で右矢印を押すと埋め込み要素の後に移動
埋め込み要素 embed right shift Shift+ArrowRight 埋め込み要素の右端でShift+右矢印を押すと埋め込み要素を選択範囲に含める

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?