Quill Editor에서 이미지 태그에 CSS 클래스를 추가하는 방법

Question

부트 스트랩과 함께 Quill을 사용하고 싶습니다.

편집기의 이미지 태그에 class="img-fluid" 속성을 추가해야합니다. 그게 내가 당신의 img 삽입 오점을 확장하여 그것을 할 수 있다고 생각 작동하지 않는 경우

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

을하지만 잔인한 수 있습니다

Answer 1

내가 먼저 CSS에서 선택을 변경하려고 할 것입니다.

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