Quillのsvgアイコンを無効にする方法はありますか？

Question

私は最新のバージョンのquill.jsを使用しています。クイルがエディタツールバーを生成するときに使用するsvgアイコンをオーバーライドする方法があるのか​​どうか疑問に思っていました（バブルテーマについては、バブルテーマの場合は重要です）。ソース内でアイコンが定義されている場所を覗いてみましたが、ツールバーオプションの配列を渡すか、マークアップを自分で定義してセレクタをtoolbarに渡すと、両方ともsvgアイコンが挿入されます。

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

Answer 1

バブルテーマのアイコンは、hereです。

エディタを起動する前にアイコンモジュールをインポートして、各アイコンのマークアップを上書きすることができます。

この例では、太字のアイコンをfont-awesome太字のアイコンに置き換えています。 font-awesome CSSファイルも読み込んでください。 （泡でそれを試していない）：問題from githubの

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', {}); 

Answer 2

コピーパスタ：

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円と大胆なアイコンを交換してい

Quillは、設定に登録されているスタイルごとに.ql- *クラスを持つボタンを作成します。あなたは、（添付ファイルのアイコンのために）以下のようにCSSでそれらのクラスを標的とすることにより、空白のボタンを無効にすることができます：

.ql-attachment { 
    background: no-repeat scroll 50% 50% transparent !important; 
    background-image: url("attachment.svg") !important; 
    text-align: center; 
} 

.ql-attachment:hover { 
    background-image: url("attachment-hover.svg") !important 
} 

Answer 3

クイルjsのツールバーをカスタマイズしてみましょう。あなたは素晴らしいフォント、独自のSVG、またはカスタム機能を使用することができます。サンプルはguidelinesです。

クイル

Quill.register(BoldBlot); 

と blot

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

ハンドルをクリックしてイベント

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

登録を作成して、ツールバーのボタン

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

を作成します。

チェックオンcodepen