クリップボードモジュール

クリップボードは、Quill と外部アプリケーション間のコピー、カット、ペーストを処理します。貼り付けられたコンテンツを適切に解釈するためのデフォルトのセットが存在し、マッチャーを使用してさらにカスタマイズすることができます。

クリップボードは、対応する DOM ツリーをたどることにより、貼り付けられた HTML を解釈します。事後注文を構築し、デルタすべてのサブツリーの表現。各子孫ノードでは、これまでの DOM ノードとデルタ解釈を使用してマッチャー関数が呼び出され、マッチャーが変更されたデルタ解釈を返すことができます。

親しみやすさと快適さデルタマッチャーを効果的に使用するには、これが必要です。

API

追加マッチャー

カスタムマッチャーをクリップボードに追加します。使用するマッチャーnodeType追加された順序で最初に呼び出され、次に CSS を使用するマッチャーが続きます。selector、これも追加された順序です。nodeType多分Node.ELEMENT_NODEまたNode.TEXT_NODE。

メソッド

addMatcher(selector: String, (node: Node, delta: Delta) => Delta)
addMatcher(nodeType: Number, (node: Node, delta: Delta) => Delta)

例

quill.clipboard.addMatcher(Node.TEXT_NODE, function(node, delta) {
  return new Delta().insert(node.data);
});

// Interpret a <b> tag as bold
quill.clipboard.addMatcher('B', function(node, delta) {
  return delta.compose(new Delta().retain(delta.length(), { bold: true }));
});

危険なほどHTMLを貼り付けます

HTML スニペットで表されるコンテンツをエディターの指定されたインデックスに挿入します。スニペットはクリップボードによって解釈されますマッチャー、正確に入力された HTML が生成されない可能性があります。挿入インデックスが指定されていない場合、エディターの内容全体が上書きされます。のソース多分"user"、"api"、 また"silent"。

HTML を不適切に処理すると、次のような問題が発生する可能性があります。クロスサイトスクリプティング (XSS)また、適切にサニタイズしないとエラーが発生しやすくなり、Web 脆弱性の主な原因となることはよく知られています。このメソッドは React の例に従っており、開発者が必要な予防策を講じていることを保証するために適切な名前が付けられています。

メソッド

dangerouslyPasteHTML(html: String, source: String = 'api')
dangerouslyPasteHTML(index: Number, html: String, source: String = 'api')

例

quill.setText('Hello!');

quill.clipboard.dangerouslyPasteHTML(5, '&nbsp;<b>World</b>');
// Editor is now '<p>Hello&nbsp;<strong>World</strong>!</p>';

構成

マッチャー

マッチャーの配列をクリップボードの構成オプションに渡すことができます。これらは Quill 独自のデフォルト マッチャーの後に追加されます。

var quill = new Quill('#editor', {
  modules: {
    clipboard: {
      matchers: [
        ['B', customMatcherA],
        [Node.TEXT_NODE, customMatcherB]
      ]
    }
  }
});