Quill의 svg 아이콘을 재정의하는 방법이 있습니까?

최신 버전의 quill.js를 사용하고 있는데, 툴바를 생성 할 때 퀼이 사용하는 svg 아이콘을 오버라이드 할 수있는 방법이 있는지 궁금합니다. (버블 테마의 경우 중요합니다.)Quill의 svg 아이콘을 재정의하는 방법이 있습니까?

소스를 어디에서 볼 수 있는지 살펴 보았습니다. 그러나 툴바 옵션 배열을 전달하거나 마크 업을 직접 정의한 다음 toolbar에 셀렉터를 전달하면 svg 아이콘이 삽입됩니다.

Quill 소스를 가져 와서 사용자 지정 빌드를 수행 할 필요없이이 동작을 사용자 지정하는 방법이 있습니까? 어떻게 할 수 있는지와 같은 것. 을 맞춤 설정하여 sanitize()을 사용자 정의 하시겠습니까?

출처

2016-11-02 Kyle

버블 테마의 아이콘은 here 인라인입니다.

편집기를 시작하기 전에 icons 모듈을 가져 와서 각 아이콘의 마크 업을 덮어 쓸 수 있습니다.

이 예에서는 굵게 표시된 아이콘을 굵게 표시된 글꼴로 대체합니다. font-awesome CSS 파일을로드하는 것을 잊지 마십시오. (거품을 시도하지 않은) : 문제 from github의

var icons = Quill.import('ui/icons'); 
icons['bold'] = '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100"/></svg>'; 
// create the editor: var quill = new Quill('#editor-container', {});

출처

2016-11-02 17:13:50

복사 파스타 :

var icons = Quill.import('ui/icons'); 
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>'; 
// create the editor: var quill = new Quill('#editor-container', {});

이 예제에서 나는 SVG 원에 굵은 아이콘을 대체하고있어

Quill은 설정에서 등록 된 모든 스타일에 대해 .ql- * 클래스로 버튼을 생성합니다. 당신은 (첨부 파일 아이콘을) 아래 CSS와 그 클래스를 대상으로 빈 버튼을 재정의 할 수
이

.ql-attachment { 
    background: no-repeat scroll 50% 50% transparent !important; 
    background-image: url("attachment.svg") !important; 
    text-align: center; 
} 

.ql-attachment:hover { 
    background-image: url("attachment-hover.svg") !important 
}

출처

2016-11-02 17:21:15 Keno

퀼은 JS 도구 모음을 사용자 정의 할 수 있습니다. 멋진 awesome, 자신의 SVG 또는 사용자 정의 기능을 사용할 수 있습니다. 샘플이있는 guidelines입니다.

퀼 blot

class BoldBlot extends Inline { } 
BoldBlot.blotName = 'bold'; 
BoldBlot.tagName = 'strong';

핸들 클릭 이벤트

$('#bold-button').click(function() { 
    quill.format('bold', true); 
});

등록 만들기 도구 모음 단추

<div id="tooltip-controls"> 
    <button id="bold-button"><i class="fa fa-bold"></i></button> 
    : 
</div>

만들기

Quill.register(BoldBlot);

확인하기 codepen

출처

2016-12-18 10:13:55

Quill의 svg 아이콘을 재정의하는 방법이 있습니까?

답변

관련 문제