문제
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.current = quill;
}, [content]);해결
- 코드 가독성이 나빠서 RxJS를 사용해 코드 refactoring
initilizing 할 때는 RxJs를 사용하면 확실하게 내가 원하는 시점에 초기화할 수 있다
- innerHTML을 userflow가 block하는 부분이 있나? quill에서 제공하는 내부 method를 사용해 해결
setContents
Overwrites editor with given contents. Contents should end with a newline. Returns a Delta representing the change. This will be the same as the Delta passed in, if given Delta had no invalid operations. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.
Methods
setContents(delta: Delta, source: String = 'api'): DeltaExamples
quill.setContents([
{ insert: 'Hello ' },
{ insert: 'World!', attributes: { bold: true } },
{ insert: '\n' }
]);setContents(delta: Delta, source: String = 'api'): Delta사용 시 인수로 Delta를 넘겨줘야 한다
content
const content = ‘<div>HTML이 포함된 텍스트</div>’;집어 넣기
// use clipboard module
quill.clipboard.dangerouslyPasteHTML(0, content);
// use quill.setContents
quill.setContents(
qill.clipboard.convert(content),
'api'
);결론
innerHTML 사용에 주의하자
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
<link
href="//cdn.quilljs.com/1.3.6/quill.bubble.css"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div id="editor">Editor Dom</div>
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
/**
* @init
* */
const $editor = document.querySelector("#editor");
const quill = new Quill($editor);
window.quill = quill;
</script>
<script>
/**
* @logic
* */
const content = `
<div>HTML이 포함된 Content</div>
<div>
<img src="https://i.vimeocdn.com/video/680918441-b17f6b5d3cf508f4554b9a176faacbf150df4e784b73dc1e905d32a53195b096-d?mw=1000&mh=560&q=70" />
</div>
`;
// 1 insert
// quill.clipboard.dangerouslyPasteHTML(0, content);
// 2 replace content
quill.setContents(quill.clipboard.convert(content), "api");
</script>
</body>
</html>'✘✘✘ Javascript > Quill' 카테고리의 다른 글
| [quill] setContents does not work on image attributes? (0) | 2023.05.06 |
|---|---|
| [Quill] Quill.prototype.focus(): 스크롤 최상단 초기화 (0) | 2023.04.14 |
| [Quill] 툴바에 호버 시 tooltip 보여주기 (0) | 2023.04.05 |
| [Quill] link에 https protocol Sanitization (http/https 붙이기) (0) | 2023.04.05 |
댓글