Как добавить класс css в тег изображения в Quill Editor

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

Вот пример кода, который расширяет изображениеBlot и добавляет к нему свой класс. Его нужно довольно легко настроить, если вам нужно что-то более конкретное.

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