web-dev-qa-db-ja.com

Quill.jsに新しい形式（<hr>タグ）を追加するにはどうすればよいですか？

<hr>タグを quill.js（ベータ） エディターに追加するボタンを追加したい。

ここでは fiddle です。

<!-- Initialize Quill editor -->
    <div id="toolbar-container">
        <span class="ql-formats">
          <button class="ql-hr"></button>  //here my hr-button
        </span>
        <span class="ql-formats">
          <button class="ql-bold"></button>
          <button class="ql-italic"></button>
        </span>
    </div>

    <div id="editor">

      <p>Hello World!</p>
      <hr> // this gets replaced by <p> tag automatically *strange*
      <p>Some initial <strong>bold</strong> text</p>
    </div>

エディターを初期化します。

 var quill = new Quill('#editor', {
        modules: {
          toolbar: '#toolbar-container'
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
      });

ここで、エディターに<h1>タグ機能を追加すると、非常にうまく機能します。

  $('.ql-hr').on("click",function(){

      var range = quill.getSelection();      
      var text = quill.getText(range.index, range.length);
      quill.deleteText(range.index, range.length);
      quill.pasteHTML(range.index, '<h1>'+text+'</h1>');
  })

今、私は<hr>タグに対して同じことを試みますが、それはまったく機能しません：

  $('.ql-hr').on("click",function(){

      var range = quill.getSelection();      
      quill.pasteHTML(range.index, '<hr>');
  })

最初の<hr>のdiv#editorタグは<p>タグに置き換えられます。また、追加したボタンの機能は<hr>タグでは機能しませんが、他のタグでは機能します。 <hr>タグがQuill.jsに実装されていないことを知っています。それが、このコンソール出力を取得する理由でもあります。

クイル：存在しない形式へのアタッチを無視するツールバーhr select.ql-hr

これを修正する方法はありますか？

javascripthtmlquill
37
Suisse

なぜ質問に下票があるのか​​はまだわかりませんが、ここに解決策があります：

埋め込みのインポート blot -重要：「ブロック」ではなく、「埋め込み」、「ブロック/埋め込み」ではありません！

 var Embed = Quill.import('blots/block/embed');

その埋め込みを拡張する新しいクラスを定義する

        class Hr extends Embed {
            static create(value) {
                let node = super.create(value);
                // give it some margin
                node.setAttribute('style', "height:0px; margin-top:10px; margin-bottom:10px;");
                return node;
            }
        }

タグを定義する

        Hr.blotName = 'hr'; //now you can use .ql-hr classname in your toolbar
        Hr.className = 'my-hr';
        Hr.tagName = 'hr';

<hr>ボタンのカスタムハンドラーを記述する

        var customHrHandler = function(){
            // get the position of the cursor
            var range = quill.getSelection();
            if (range) {
                // insert the <hr> where the cursor is
                quill.insertEmbed(range.index,"hr","null")
            }
        }

新しいフォーマットを登録する

        Quill.register({
            'formats/hr': Hr
        });

HTMLで適切なセレクターを使用してエディターをインスタンス化する

       var quill = new Quill('#editor', {
          modules: {
            toolbar: { container: '#toolbar-container',
                handlers: {
                    'hr': customHrHandler
                }
            }
          },
          theme: 'snow'
        });

HTML部分は同じままです。すべての<hr>機能は、 <img> format と同様に実行できます。

コミュニティに感謝します。

45
Suisse

軽微な問題に対処するためのコメントとして十分な担当者がいないため、回答として投稿します。

@ Suisse's great answer に示されている埋め込みによって引き起こされるdefaultプロンプトボックスは、 ツールバーハンドラで処理する必要があるようです。 （2番目のパラメーター付き）、次のように：

var toolbarOptions = {
  handlers: {
    // ...
    'hr': function(value) {
       this.quill.format('hr', true);
    }
  }
}

ソースディスカッション-
ドキュメント：ツールバーモジュール を介してカスタムの埋め込みブロットを呼び出すときにデフォルトの「プロンプト」を回避する方法

ツールバーハンドラドキュメントのプロンプト例： https://quilljs.com/docs/modules/toolbar/#handlers

1
pratu16x7