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

Я хочу использовать Quill с бутстрапом.

Мне нужно добавить атрибут class="img-fluid" к тегам изображений в редакторе.


person Mike Anderson    schedule 20.10.2016    source источник


Ответы (2)


Я бы попробовал сначала изменить селектор на вашем css:

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

Если это не сработает, я думаю, вы можете сделать это, расширив пятно для встраивания img, но это может быть излишним.

person Keno    schedule 21.10.2016

Вот пример кода, который расширяет 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);
person Andy    schedule 14.12.2016
comment
Привет Энди, спасибо за пример. Я должен проверить это, определенно. Не могли бы вы рассказать мне, как это будет выглядеть для тегов li? Потому что мне нужно расширить классы CSS для этих элементов. Спасибо за вашу помощь. - person natterstefan; 19.12.2018
comment
Извините, я перешел с Quill и не прикасался к нему больше года, поэтому я как бы забыл, как все это работает. Надеюсь, кто-нибудь возьмется за это и сможет вам помочь. - person Andy; 19.12.2018
comment
Не волнуйся. Благодарю за ваш ответ. Давай посмотрим что происходит. - person natterstefan; 21.12.2018