DOM9 [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] 툴바에 호버 시 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. Editable Dom => attribute: contentEditable 2022. 7. 22. Dom id => window[id] or document.querySelector('#id') Why don't we just use element IDs as identifiers in JavaScript? HTML 5 spec, 'Named access on window object" window[name] Returns the indicated element or collection of elements. As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to this API can vary over time, as new features are added to the web platform, for example. Instead of this, use document.getElement.. 2022. 7. 22. [CSS] Disabling text selection => user-select property How do I prevent the browser (JavaScript and CSS) from disabling text selection on web pages without disabling all JavaScript?Ask Question Search: javascript css how to prevent content selected div.disable { user-select: none; } [css] disabling text selection 2022. 7. 10. [css][filter] blur CSS filter document filter: blur(0); filter: blur(4px); filter: blur(1.5rem); 2022. 7. 9. CSS selector with data attribute [css] selector [attributes=”—”], data attributes with data attribute div[data-your-name="tio"] { } with javascript dom manipulation const dom = document.querySelector('div.test[data-id="100"]'); General usage [class="(╯°□°）╯︵ ┻━┻"]{ color: red; font-weight: bold; } [data-value] { /* Attribute exists */ } [data-value="foo"] { /* Attribute has this exact value */ } [data-value*="foo"] { /*.. 2022. 7. 4. @media only print: apply css only on print mode pinrt css inside @media only print only applied when printing @media only print { .body { background: black !important; } 2022. 7. 2. requestFullscreen(): How to make dom Fullscreen [Document.fullscreenElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement) / [ShadowRoot.fullscreenElement](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/fullscreenElement) The fullscreenElement property tells you the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that's currently being displayed in fullscreen mode on the DOM (or .. 2022. 7. 2. 이전 1 다음
