14

スタイルを設定できるカスタム埋め込みフォーマットを作成したいのですが、テキストは変更できません。私のユースケースは、ハッシュタグのケースとよく似ています。エディターで現在選択されている範囲にハッシュタグを追加する外部ボタンが必要です。しかし、これを行った後、ハッシュタグを「ブロック」として動作させて、ユーザーがそこに行ってそのテキストを変更できないようにします。

これを達成できる唯一の方法は、フォーマットのノードが contenteditable=false であると言うことでしたが、主にこのアプローチに問題があるため、正しい方法で進んでいるかどうかはわかりません。

ハッシュタグがエディターの最後のものである場合、(矢印またはカーソルを使用して) それを超えて移動することはできません。それをダブルクリックして選択すると、(個々の単語ではなく) 全体を選択する必要があります (スタイリングのため) カーソルがハッシュタグのすぐ後ろにある場合、右を押すと、ハッシュタグ内に書き込みます。これを試しながら作成したコードペンを確認できます。

  Quill.import('blots/embed');
  class QuillHashtag extends Embed {
    static create(value) {
      let node = super.create(value);
      node.innerHTML = `<span contenteditable=false>#${value}</span>`;
      return node;
    }
  }
  QuillHashtag.blotName = 'hashtag'; 
  QuillHashtag.className = 'quill-hashtag';
  QuillHashtag.tagName = 'span';

完全なコードペンは次のとおりです: http://codepen.io/emanuelbsilva/pen/Zpmmzv

どうすればこれを達成できるかについてのヒントを教えていただければ幸いです。

ありがとう。

4

1 に答える 1