quill5 [quill] setContents does not work on image attributes? Problem quill.setContents(content); This remove width property Cause There is a missing on formats property on quill options Solution quill option you need to add width on formats property like below export const defaultOptions: QuillOptionsStatic = { modules: { toolbar: { container: defaultToolbarOptions, 'image-tooltip': true, 'link-tooltip': true, handlers: { // image: () => {.. 2023. 5. 6. [Quill] innerHTML = content 사용 시 생기는 문제점 문제 Business 부서에서 userflow를 사용하고 있다 Production Tour 및 신규 기능 안내 Tooltip을 보여주는 기능이다. 그런데 이 기능이 작동 시 quill editor API는 성공적으로 내용을 가져 왔는데 이를 quill에 삽입 시 컨텐츠가 보이지 않는 문제가 발생했다. 원인 innerHTML로 적용된 DOM 컨텐츠를 userflow 실행 시 기본으로 변경 하는 작업이 있는 것으로 보임 ~~innerHTML = content~~를 사용하지 말자 const quillRef = useRef(); useEffect(() => { if (quillRef.current) return; const quill = new Quill($dom, options); quillRef.curren.. 2023. 5. 4. [Quill] Quill.prototype.focus(): 스크롤 최상단 초기화 문제 { quill.focus(); setIsEditing(() => true); }} /> 원인 click 이벤트 때 quill에 포커스를 주려고 quill.foucs()를 사용했다. 클릭 때마다 스크롤이 최상단으로 올라가서 확인해보니 quill.focus() 사용 시 스크롤이 초기화 되는 걸 발견했다. 해결 { if (isEditing) return; quill.focus(); }} /> editing 상태일 때 quill focus가 일어나지 않도록 변경해서 해결... 참고 focus() { const { scrollTop } = this.scrollingContainer; this.selection.focus(); this.scrollingContainer.scrollTop = scrollTop;.. 2023. 4. 14. [Quill] 툴바에 호버 시 tooltip 보여주기 import Quill from "quill"; interface TooltipOptions { tooltips?: { [key: string]: string }; } class TooltipModule { private quill: Quill; private options: TooltipOptions; constructor(quill: Quill, options: TooltipOptions = {}) { this.quill = quill; this.options = options; // Set default tooltips if not provided if (!this.options.tooltips) { this.options.tooltips = { bold: 'Bold', italic:.. 2023. 4. 5. [Quill] link에 https protocol Sanitization (http/https 붙이기) Search:: quill editor I try to edit embed link, but edit button does not work Modify Link.sanitize const Link = Quill.import('formats/link'); const originalSanitize = Link.sanitize; Link.sanitize = function customSanitizeLinkInput(linkValueInput: any) { let val = linkValueInput; if (!/^(https|http?:\/\/)/.test(val)) val = `https://${val}`; return originalSanitize.call(this, val); // reta.. 2023. 4. 5. 이전 1 다음
