web-dev-qa-db-ja.com

クイルブロット用のカスタムエディターを実装する

クイルエディター を自分のニーズに合わせてカスタマイズしようとしています。 https://quilljs.com/guides/cloning-medium-with-parchment/ で説明されているように、カスタムブロットを実装して挿入することができましたが、ブロットに添付されているデータを編集する必要があります、たとえばリンクのURLなど。 Quillのデフォルトの実装では、リンク用の小さな「インライン」編集ボックスが表示されます。そのようなことを自分で実装したいのですが、理解できません。ドキュメントやガイドにヒントは見つかりませんでした。クイルのソースコードを読んで、リンクの編集ダイアログが実装されている場所を理解できませんでした。どんな出発点でも大歓迎です。

quill
10
Achim

同様のことを試しました。適切な方法は、モジュールを作成することです。残念ながら、すでにご存じのように、見た目ほど簡単ではありません。

クイルの拡張機能の作成方法を理解するのに非常に役立ついくつかの役立つリソースを紹介します。クイルのメンテナがキュレートしています 素晴らしいクイル リスト。

特に調べることをお勧めします

  • quill-emoji 書き込み中にツールチップの絵文字を表示するコードが含まれています
  • quill-form おそらく、いくつかのフォーム拡張に、正しい方向を示すコードが含まれている

カスタムクイルモジュールを使用して試してみました。

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

class NamedLinkBlot extends InlineBlot {
  static create(value) {
    const node = super.create(value);

    node.setAttribute('href', value);
    node.setAttribute('target', '_blank');
    return node;
  }
}
NamedLinkBlot.blotName = 'namedlink';
NamedLinkBlot.tagName = 'A';

Quill.register('formats/namedlink', NamedLinkBlot);

const Tooltip = Quill.import('ui/tooltip');


class NamedLinkTooltip extends Tooltip {
  show() {
    super.show();
    this.root.classList.add('ql-editing');
  }


}

NamedLinkTooltip.TEMPLATE = [
  '<a class="ql-preview" target="_blank" href="about:blank"></a>',
  '<input type="text" data-link="https://quilljs.com">',
  'Url displayed',
  '<input type="text" data-name="Link name">',
  '<a class="ql-action"></a>',
  '<a class="ql-remove"></a>',
].join('');


const QuillModule = Quill.import('core/module');

class NamedLinkModule extends QuillModule {
  constructor(quill, options) {
    super(quill, options);
    this.tooltip = new NamedLinkTooltip(this.quill, options.bounds);
    this.quill.getModule('toolbar').addHandler('namedlink', this.namedLinkHandler.bind(this));
  }

  namedLinkHandler(value) {
    if (value) {
      var range = this.quill.getSelection();
      if (range == null || range.length === 0) return;
      var preview = this.quill.getText(range);
      this.tooltip.show();
    }
  }
}

Quill.register('modules/namedlink', NamedLinkModule);

const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      namedlink: {},
      toolbar: {
        container: [
          'bold',
          'link',
          'namedlink'
        ]
      }
    }
  });

CodePenデモ

ツールチップを表示するには：

  1. 単語を選択してください
  2. リンクボタンの右側にある非表示のボタンをクリックすると、カーソルが手に変わります。

対処する必要がある主な問題：

  • ツールチップをカスタマイズするには、コードの大部分を SnowTooltip からコピーする必要があります。主な問題は、そのツールチップを簡単に拡張できないことです。
  • また、イベントリスナーのコードを適応させる必要がありますが、それは簡単なはずです。
1
Kamil Niski

これが部分的な答えです。ファイル " https://github.com/quilljs/quill/blob/develop/themes/snow.js "の41〜64行目を参照してください

私は似たようなものを実装しようとしませんでしたが、Quillは「selection-change」イベントを監視しており、選択がリンクが定義されたLinkBlotにあるかどうかを確認しているようです。

SnowTooltipクラスには、セレクターへの参照「a.ql-preview」、「ql-editing」、「a.ql-action」、および「a.ql-remove」が含まれています。これらは、リンク編集ツールチップにあります。

this.quill.on(
  Emitter.events.SELECTION_CHANGE,
  (range, oldRange, source) => {
    if (range == null) return;
    if (range.length === 0 && source === Emitter.sources.USER) {
      const [link, offset] = this.quill.scroll.descendant(
        LinkBlot,
        range.index,
      );
      if (link != null) {
        this.linkRange = new Range(range.index - offset, link.length());
        const preview = LinkBlot.formats(link.domNode);
        this.preview.textContent = preview;
        this.preview.setAttribute('href', preview);
        this.show();
        this.position(this.quill.getBounds(this.linkRange));
        return;
      }
    } else {
      delete this.linkRange;
    }
    this.hide();
  },
);
1
גלעד ברקן