Wie css-Klasse zum Bild-Tag in Quill Editor

Question

hinzufügen Ich möchte Quill mit Bootstrap verwenden.

Ich muss class="img-fluid" Attribut zu Bild-Tags im Editor hinzufügen.

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

Wenn das nicht ich denke, funktioniert Sie es durch die Erweiterung der img einbetten Blot tun können, aber es könnte zu viel des Guten: erste

Answer 1

Ich würde versuchen, die Wähler auf Ihrem CSS ändern.

Answer 2

Hier ist ein Beispielcode, der imageBlot erweitert und Ihre Klasse hinzufügt. Es sollte ziemlich einfach zu justieren sein, wenn Sie etwas spezifischeres brauchen.

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