5

私は最新バージョンの quill.js を使用していますが、Quill がエディター ツールバーを生成するときに使用する svg アイコンをオーバーライドする方法があるかどうか疑問に思っていました (それが重要な場合は、バブル テーマの場合)。

ソースのどこでアイコンが定義されているかを調べてみましたが、ツールバーオプションの配列を渡すか、自分でマークアップを定義してセレクターを渡してtoolbar両方ともsvgアイコンを挿入するようです。

Quill ソースを取得してカスタム ビルドを実行する必要なく、この動作をカスタマイズする方法はありますか? Quill.import('formats/link')たとえば、カスタマイズする方法のようなものはありますsanitize()か?

4

3 に答える 3

9

バブル テーマのアイコンはここにインライン化されています。

エディターを開始する前にアイコン モジュールをインポートして、各アイコンのマークアップをオーバーライドできます。

この例では、太字のアイコンを font-awesome の太字のアイコンに置き換えています。font-awesome CSS ファイルも忘れずにロードしてください。

var icons = Quill.import('ui/icons');
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';
// create the editor: var quill = new Quill('#editor-container', {});

この例では、太字のアイコンを svg の円に置き換えています。

var icons = Quill.import('ui/icons');
icons['bold'] = '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100"/></svg>';
// create the editor: var quill = new Quill('#editor-container', {});
于 2016-11-02T17:13:50.207 に答える
2

Quill js を使用すると、ツールバーをカスタマイズできます。素晴らしいフォント、独自の SVG、またはカスタム機能を使用できます。サンプル付きのガイドラインです。

ツールバー ボタンの作成

<div id="tooltip-controls">
  <button id="bold-button"><i class="fa fa-bold"></i></button>
  :
</div>

ブロットの作成

class BoldBlot extends Inline { }
BoldBlot.blotName = 'bold';
BoldBlot.tagName = 'strong';

クリック イベントを処理する

$('#bold-button').click(function() {
  quill.format('bold', true);
});

クイルに登録する

Quill.register(BoldBlot);

コードペンで確認

于 2016-12-18T10:13:55.797 に答える