quill - Quill Editor でイメージタグに css クラスを追加する方法

Question

ブートストラップでQuillを使いたい。

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);