クールエディタのイメージタグにCSSクラスを追加するには

Question

ブートストラップでクイルを使いたいです。

class="img-fluid"属性をエディタのイメージタグに追加する必要があります。

Answer 1

私が最初にあなたのCSSのセレクタを変更しようとするだろう。それがうまくいかない場合は

.ql-snow .ql-editor img { 
    max-width: 100%; 
    display: block; 
    height: auto; 
} 
/* If your theme is different just change the selector */ 

を私はあなたのimg埋め込みブロットを拡張することによってそれを行うことができると思いますが、それはやり過ぎかもしれません。

Answer 2

ここでは、imageBlotを拡張し、クラスを追加するサンプルコードを示します。より具体的なものが必要な場合は、調整するのがかなり簡単です。

class ImageBlot extends BlockEmbed { 
    static create(value) { 
     let node = super.create(); 
     node.setAttribute('alt', value.alt); 
     node.setAttribute('src', value.url); 
     node.setAttribute('class', "img-fluid"); 
     return node; 
    } 

    static value(node) { 
     return { 
      alt: node.getAttribute('alt'), 
      url: node.getAttribute('src') 
     }; 
    } 
} 
ImageBlot.blotName = 'image'; 
ImageBlot.tagName = 'img'; 

Quill.register(ImageBlot);