quill - 如何在 Quill 编辑器中将 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 embed 印迹来做到这一点，但这可能有点矫枉过正。

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