HTML을 contenteditable에 붙여 넣을 때 Chrome에서 글꼴 크기를 설정하지 못하도록 방지

Question

재현:

1. Firefox 데스크톱 및 Chrome 데스크톱에서 MVCE 스니펫을 실행하세요.
2. FF Desktop을 열고 소스 코드에서 "foobar"를 복사하세요.
3. Chrome 데스크톱을 열고 대상에 붙여넣습니다(here:의 콜론 뒤)

으아악 으아악 으아악

알게 될 내용:

1. 클립보드 데이터에는 <b>foobar</b> （请参阅 PASTE HTML:) 뒤에 오는 내용이 포함되어 있지만...
2. 실제 붙여넣은 HTML은 b 元素上设置了 style="font-size: 14px;"(contenteditable의 상위 항목에서 14px 크기)입니다.

소스 클립보드 데이터에 글꼴 크기가 지정되지 않았기 때문에 붙여넣은 HTML에 글꼴 크기가 설정되지 않았으면 좋겠습니다.

질문: 소스 HTML에 글꼴 크기가 없을 때 Chrome에서 붙여넣은 HTML에 글꼴 크기를 입력하지 않도록 하려면 어떻게 해야 하나요?

해결 방법을 시도했습니다. 소스에 font-size: unset/revert ，但这会导致 font-size: unset 설정을 하면 붙여넣은 HTML에도 나타납니다. 붙여넣은 HTML에 글꼴 크기가 표시되는 것을 원하지 않습니다.

---

이 코드의 컨텍스트는 대상에 붙여넣은 text/html 데이터를 제어하는 ​​Chrome 확장 프로그램입니다. 대상 contenteditable에 붙여넣기 이벤트 리스너를 연결할 수 있지만 붙여넣은 후에는 콘텐츠의 HTML/스타일을 변경할 수 없습니다.

Answer 1

붙여넣기 이벤트를 가로채고 붙여넣은 내용을 변경하여 js를 사용하여 일반 텍스트로 붙여넣을 수 있습니다.

제 아이디는 contenteditable div 上添加了 id="editor"입니다. 그리고 다음 js 코드를 추가하세요:

으아아아

다음은 실제 동작의 일부입니다. 문제가 해결되면 알려주세요.

으으으으
'; }); }; 으아아아 으아아아

Answer 2

Select API를 사용할 수 있습니다.
단계는

• paste 이벤트 핸들러에서 현재 선택 항목을 나타내는 Range 개체를 가져옵니다.
• 이 Range 对象将粘贴的 HTML 标记解析为 DocumentFragment 对象，这要归功于 createContextualFragment() 개체를 사용하여 createContextualFragment()
메서드.
• 이전에 선택한 콘텐츠를 삭제합니다(Range#deleteContents()
).
• 2단계에서 생성한 DocumentFragment 개체를 커서가 있는 위치에
삽입합니다.
• 현재 Range 개체를 축소하여 커서가 새로 붙여넣은 콘텐츠의 끝으로 이동합니다.

이러한 모든 단계를 수동으로 수행하면 브라우저가 서식 있는 텍스트 콘텐츠를 "지능적으로" 처리하지 못하고 클립보드의 콘텐츠만 구문 분석합니다.

으으으으
'; e.preventDefault(); const tag = e.clipboardData.getData("text/html") || e.clipboardData.getData("텍스트/일반 텍스트"); const sel = getSelection(); const 범위 = sel.getRangeAt(0); const frag = range.createContextualFragment(markup); 범위.deleteContents(); range.insertNode(frag); range.collapse(); }); }; 으아악 으아악