재현:
here:의 콜론 뒤)으아악 으아악 으아악
알게 될 내용:
<b>foobar</b> （请参阅 PASTE 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/스타일을 변경할 수 없습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
붙여넣기 이벤트를 가로채고 붙여넣은 내용을 변경하여 js를 사용하여 일반 텍스트로 붙여넣을 수 있습니다.
제 아이디는
으아아아contenteditablediv 上添加了id="editor"입니다. 그리고 다음 js 코드를 추가하세요:다음은 실제 동작의 일부입니다. 문제가 해결되면 알려주세요.
'; }); }; 으아아아 으아아아
Select API를 사용할 수 있습니다.
단계는
Range개체를 가져옵니다.Range对象将粘贴的 HTML 标记解析为DocumentFragment对象，这要归功于createContextualFragment()개체를 사용하여createContextualFragment()Range#deleteContents()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(); }); }; 으아악 으아악