web-dev-qa-db-ja.com

Quill（リッチテキストエディター）で先頭/末尾の空白を検出してトリミングする方法は？

リッチテキストエディターである Quill で先頭/末尾の空白を検出して削除するにはどうすればよいですか？

たとえば、以下のサンプル[〜＃〜] html [〜＃〜]はQuillテキストの出力"\nHi"。

Quill（ドキュメント全体ではなく）によって作成されたテキストの各ブロックの先頭と末尾の空白を検出して削除します。基本的に、埋め込まれたQuillエディターごとに先頭/末尾の空白を削除します。 （同じページ内に複数のエディターを埋め込みます。）

[〜＃〜] api [〜＃〜]はこれを実現する簡単な方法を提供していないようで、ハッキングが必要でしょうか？

Quillでテキストを効果的にトリミングするエレガントな方法はありますか？

<div class="ql-editor" 
     data-gramm="false" 
     contenteditable="true" 
     spellcheck="false" 
     autocomplete="off" 
     autocorrect="off" 
     autocapitalize="off">
   <p style="align-self: center;">
       <br>
   </p>
   <p style="align-self: center;">
        <span style="font-family: Lato; color: rgb(0, 0, 0); font-size: 80px; line-height: 1.5; letter-spacing: 0em; font-weight: 400; font-style: normal;">Hi&nbsp;</span>
     </p>
</div>
javascripthtmlcssrich-text-editorquill
4
Crashalot

Quillは Delta クラスを使用してリッチテキスト形式を記述し、Quill getContents メソッドを使用してすべてを取得できます次の形式のコンテンツエントリ：

Delta {
  ops: [
    insert: "↵↵↵Hello↵world!↵↵"
  ]
}

これらすべてのエントリをループするロジックを作成し、先頭と末尾の改行を検出して排除する必要があります。

2つの配列を使用します。1つは新しいデルタエントリを格納する配列で、もう1つは新しいデルタエントリ配列に追加する場合と追加しない場合がある保留中の終了ラインフィードを保存する場合です。また、先頭の改行を修正したかどうかを示すフラグもあります。

このソリューションでは、このメソッド 「ぼかしイベントの処理」 を使用して、ぼかしイベントを検出します。

クイルぼかしのコードとスニペット（実行して実際に見る）：

インラインコメントをお読みください

let quills = [];

[...document.getElementsByClassName('quill-editor')].forEach((el, idx) => {
  const quill = new Quill(el, {
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['image', 'code-block']
      ]
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'  // or 'bubble'
  });

  quill.on('selection-change', function(range, oldRange, source) {
    if (range === null && oldRange !== null) {
      const delta = quill.getContents();

      let leadingFixed = false;
      let newDelta = [];
      let tempDelta = [];

      if(delta.ops.length === 1) {
        // If there is only one entry, check if it's a string and trim leading and ending LF
        let { insert, attributes } = delta.ops[0];
        if(typeof(insert) === 'string') {
          insert = insert.replace(/^\n+|\n+$/g, '');
        }
        newDelta = [{ insert, attributes }];
      } else {
        // Else go through all the insert entries
        delta.ops.forEach(({ insert, attributes }, idx) => {
          // Create a boolean to indicate if we're at the last entry
          const isLast = idx === delta.ops.length - 1;

          // If the entry is a string (not image/asset)
          if(typeof(insert) === 'string') {
            // If we haven't fixed the leading
            if(!leadingFixed) {
              // If the entry begins with LFs
              if(/^\n+/.test(insert)) {
                // Create a string witrh clean leading LFs
                let cleanText = insert.replace(/^\n+/, '');

                // If there is text after cleaning the LFs
                if(cleanText.length > 0) {
                  // Add the text to the newDelta
                  newDelta.Push({
                    insert: cleanText,
                    attributes
                  });
                  // Set leading flag to indicate we've fixed the leading
                  leadingFixed = true;
                }
              // Else if the entry does not start with LFs
              } else {
                // If the entry does not begin with LFs
                // Add any pending entries that may exists in tempDelta to the newDelta
                newDelta = newDelta.concat(tempDelta);
                // Add the existing entry
                newDelta.Push({
                  insert,
                  attributes
                });
                // Clean the any pending entries
                tempDelta = [];
                // And set the leading flag to indicate we've fixed the leading
                leadingFixed = true;
              }
            // Else if we have fixed the leading
            } else {
              // If there an entry with ending LFs
              if(/\n+$/.test(insert)) {
                // Create a string witrh clean ending LFs
                let cleanText = insert.replace(/\n+$/, '');

                // If this is the last entry
                if(isLast) {
                  // If there is text after cleaning the LFs
                  if(cleanText.length > 0) {
                    // Add any pending entries that may exists in tempDelta to the newDelta
                    newDelta = newDelta.concat(tempDelta);
                    // Add the cleaned entry
                    newDelta.Push({
                      insert: cleanText,
                      attributes
                    });
                  }
                // Else if this is not the last entry
                } else {
                  // If there is text after cleaning the LFs
                  if(cleanText.length > 0) {
                    // Add any pending entries that may exists in tempDelta to the newDelta
                    newDelta = newDelta.concat(tempDelta);
                    // Add the existing entry
                    newDelta.Push({
                      insert,
                      attributes
                    });
                    // Clean the any pending entries
                    tempDelta = [];
                  // Else if there is no text after cleaning the LFs
                  } else {
                    // Add the entry to the temp deltas so to use them later if its needed
                    tempDelta.Push({ insert, attributes });
                  }
                }
              // Else if the entry does not end with LFs
              } else {
                // Add any pending entries that may exists in tempDelta to the newDelta
                newDelta = newDelta.concat(tempDelta);
                // Add the existing entry
                newDelta.Push({
                  insert,
                  attributes
                });
                // Clean the any pending entries
                tempDelta = [];
              }
            }
          // If the entry is not a string
          } else {
            // Then all leading text/line feeds have been cleared if there were any
            // so, it's safe to set the leading flag
            leadingFixed = true;
            // Add any pending entries that may exists in tempDelta to the newDelta
            newDelta = newDelta.concat(tempDelta);
            // Add the existing entry
            newDelta.Push({
              insert,
              attributes
            })
            // Clean the any pending entries
            tempDelta = [];
          }
        });
      }

      quill.setContents(newDelta);
    } /*else if (range !== null && oldRange === null) {
      console.log('focus');
    }*/
  });

  quills.Push(quill);
});
.editors {
  display: flex;
}

.quill-editor-container {
  flex: 1;
}
.quill-editor {
  height: 100px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.core.js" integrity="sha256-jvauzib5XGeoiDyHV6mlZnpuKsEAcjhruilbo0e+L6k=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.js" integrity="sha256-CN8TogJAzCcMj0uYishm9mmawPUFKJeJh//zR/CfCO8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.core.css" integrity="sha256-2kIq+5smyR4blGwdXXCCVrPLENwavLyrG8+kLPfDPJk=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.bubble.css" integrity="sha256-2hxHujXw890GumwDHPWrwJCtdZZdrJanlGsrOTSfXnc=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.css" integrity="sha256-jyIuRMWD+rz7LdpWfybO8U6DA65JCVkjgrt31FFsnAE=" crossorigin="anonymous" />

<div class="editors">
  <div class="quill-editor-container"><div class="quill-editor"></div></div>
  <div class="quill-editor-container"><div class="quill-editor"></div></div>
</div>

私は画像アセットとフォーマットを使ってテストしましたが、かなりうまくいくようです。もちろん、コードはさらに最適化でき、おそらく簡略化できます。

フォークしてテストを行う場合は、この Stackblitzプロジェクト を確認することもできます。

3
Christos Lytras