2017-11-07 13 views
0

어떻게 QuillJS에 툴팁을 삽입합니까? 툴팁을 지정된 범위에 배치하는 데 문제가 있습니다.QuillJS에 툴팁 표시

const Tooltip = Quill.import('ui/tooltip') 
var quill = new Quill('#editor-container', { 
    modules: { 
    toolbar: [ 
     [{ header: [1, 2, false] }], 
     ['bold', 'italic', 'underline'], 
     ['image', 'code-block'] 
    ] 
    }, 
    placeholder: 'Compose an epic...', 
    theme: 'snow' // or 'bubble' 
}); 

quill.setText('Hello\nWorld!'); 
let myBounds = quill.getBounds(2, 1); 
let myTooltip = new Tooltip(quill, myBounds); 
myTooltip.show(); 

툴팁이 편집기 외부에 나타납니다. 툴팁을 생성 할 때 특정 API 문서를 찾을 수 없습니다.

답변

0

위치 방법을 툴팁에 활용해야한다는 것을 깨달았습니다. getBounds과 같은 참조 객체를 전달하면 툴팁이 다음 범위에 표시됩니다.

const Tooltip = Quill.import('ui/tooltip'); 

var quill = new Quill('#editor-container', { 
    modules: { 
    toolbar: [ 
     [{ header: [1, 2, false] }], 
     ['bold', 'italic', 'underline'], 
     ['image', 'code-block'] 
    ] 
    }, 
    placeholder: 'Compose an epic...', 
    theme: 'snow' 
}); 

quill.setText('Hello\nWorld!'); 
let myBounds = quill.getBounds(10, 0); 
let myTooltip = new Tooltip(quill); 

document.querySelector("#editor-container").addEventListener("mouseover",()=>{ 
    myTooltip.show(); 
    myTooltip.position(myBounds); 
})