如何在Quill Editor中将css类添加到图像标记

Question

我想使用Quill和bootstrap。

我需要在编辑器中为图片标记添加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);