execCommand()는 이제 더 이상 사용되지 않습니다. 대안은 무엇입니까?

execCommand()는 이제 더 이상 사용되지 않습니다. 대안은 무엇입니까?

사용하려고 했습니다.Document.execCommand()와 함께 하는 방법contenteditable사용자 지정 WYSIWYG 편집기를 빌드하기 위한 속성입니다.하지만 제가 서류를 확인했을 때Document.execCommand()저는 그것이 이제 쓸모없다는 것을 알았습니다.그것에 대한 현대적인 (또는 현존하는) 대안은 무엇입니까?

2022년 영화: 더execCommand()공식적으로는 쓸모가 없지만 대안이 없습니다.이 풍부한 , 해서 따서풍부텍지필경합사니다계야용해속우를 사용해야 .execCommand()지원하고자 하는 브라우저에서 실제로 작동하는 기능을 파악할 수 있습니다.

및 같은 는 실제사에트(Chrome, Firefox 및 Safari 같는저라우)에 대한 할 수 .execCommand()지원이 필요한 서비스가 너무 많기 때문입니다.슬픈 상황은 HTML5가 어떤 공통점도 지정할 수 없다는 것입니다.이것은 브라우저 공급업체가 방법에 동의하지 않기 때문입니다.execCommand()작동해야 합니다.따라서 HTML5에 대해서는 아무것도 지정할 수 없습니다. HTML5는 모든 새로운 브라우저가 시장에 진입하기 위해 완전한 상호 운용성을 갖추는 데 필요한 모든 항목을 지정하는 것이 전체적인 목표입니다.제 한 이유는 하지제생는실다여패니기합서만각에▁because 때문입니다.execCommand()모든 새로운 브라우저가 시장에 진입하려면 호환성이 실제로 필요합니다.따라서 적어도 하나의 브라우저 특정 구현을 공식 구현으로 표준화하는 것이 타당합니다.

의 모든 , API은 "Input Events 2, Clipboard API"의 에 대해서도 .execCommand()실제로 실행됩니다(예: 실행 취소/취소, 실제로 선택 범위 내에서 내용 변경).

가장 해결하기 어려운 부분은 캐럿 이동, 텍스트 선택, 다양한 IME(Input Method Editor) 동작 및 네이티브 클립보드 처리입니다.이들은 모두 브라우저와 운영 체제에 따라 다양한 방식으로 상호 작용합니다.예를 들어 iPad에서 iOS Safari가 번체 중국어를 쓸 때의 동작은 Tai IME가 설치된 Windows의 Firefox와 완전히 다릅니다. 이는 Chrome이 핀란드어를 쓸 때 실행되거나 여러 UNICODE 포인트 인코딩으로 이모지 문자를 입력할 때 실행되는 것과 완전히 다릅니다. 이용 한 JS 중 하는 것이 하셔야 합니다.contenteditable 아마도 쩌면어.execCommand() 대부분의 가 IME에서수 있도록 합니다.

또한 예를 들어,Android GBoard는 텍스트를 입력하는 동안 사용자에게 어떤 단어 제안을 제공할지 AI 로직을 사용하므로 동일한 편집 가능한 콘텐츠 내의 주변 텍스트에 대해서도 알아야 합니다. 따라서 필요한 컨텍스트가 없기 때문에 캐럿 아래의 빈 보이지 않는 텍스트 영역으로 이를 위장할 수 없습니다.그것은 사람들이 그것을 정확히 하려고 노력하는 것을 막지는 못했지만 실제로는 다양한 방법으로 실패합니다.

이 상황은 이미 5년 이상 지속되고 있으므로 어떠한 급격한 변화도 기대하지 마십시오.

플랫폼의 XML(HTML5 + XHTML) 편집 목적으로 Rich Editor를 만들었습니다.그렇다고는 할 수 없습니다document.execCommand()일부는 여전히 정상적으로 작동하기 때문에 완전히 사망했습니다.불행하게도 제게 주요한 문제는 브라우저가 시각장애인이나 거의 그와 같은 사람들이 사용하는 화면 판독기에 의해 인식되지 않는 스타일을 생성하기 위해 많은 다른 코드를 사용한다는 것이었습니다.

추가적으로 제가 정복해야 했던 가장 비싼 시간 버그는 시각적 선택과 기술적 선택(왜 그것들이 동일하지 않은지,묻지 않음)는 사용자가 의도하지 않은 DOM의 일부를 변경하게 되며, 이는 문자당 픽셀 수가 낮기 때문에 리치 편집기가 시각적 선택을 수행하지 않으면 사용자는 매우 빠르게 사라집니다.그것은 정복하는 데 4개월이 걸렸고 다른 벌레들도 있습니다.

궁극적으로, 저처럼 HTML/XML 편집기를 만들 생각이라면 케이크를 싫어할 정도로 테스트한 후 누군가가 와서 또 다른 버그를 지적하도록 하면서 제대로 할 계획이라면 적어도 6개월 동안 계획을 세워야 합니다.

자바스크립트에 대한 주요 초점은 다음과 같습니다.

• document.createRange()
• document.createRange().surroundContents()
• Node.cloneNode()
• window.getSelection()
• window.getSelection().getRangeAt(0).commonAncestorContainer
• appendChild
• insertBefore
• insertBefore+ nextSibling
• replaceChild

다음을 사용하여 생성된 코드가 일치하지 않는 경우execCommand()서로 다른 브라우저에서 (일반적으로 사이트의 CSS를 완전히 부정하지 않는다면 복잡한 인라인 스타일 설정) 화면 판독기와 호환되지만 제어할 수 있는 다음 요소를 사용해야 합니다.

• em"이탤릭체", 또조강 (는이릭 "체탤이체"),"),<i>사용되지 않음).
• strong"볼드 "볼드", "볼드"),<b>사용되지 않음).
• u밑줄의 경우(앵커가 u 요소와 구별되도록 스타일링되었는지 확인하십시오.u "사용되지 않는" 것으로 간주될 수 있지만, 향후 10년 정도 내에 표준을 수정할 때 이를 뒤집을 것입니다. 적절하게 사용하십시오.)
• sub일반 텍스트보다 수직으로 낮게 나타나는 하위 줄 텍스트입니다.
• sup일반 텍스트보다 수직으로 높게 나타나는 저녁 줄 텍스트입니다.
• 사용 안 함<span>화면 판독기가 버그 동작을 이해하거나 드러내지 않으므로 이러한 스타일을 구체적으로 추가하는 요소입니다. 적절하게 사용할 경우 여전히 유효한 일반 인라인 요소입니다.

저는 사실 제 Rich Editor(아직 제대로 다시 작성되지는 않았지만 패치가 적용됨)를 수정할 생각이었지만, 제 프로필에 연결된 사이트의 블로그 페이지에 소스 코드가 로드될 때 소스 코드를 보는 것은 환영합니다.원래 프로젝트는 11개월이 걸렸지만 지금은 경험상 3~4개월 정도 걸릴 것 같습니다.만약 당신이 진심이라면, 저는 틀과 도서관에서 멀리 떨어져 있는 것을 강력히 추천합니다."하지만...하지만, 그들은 삶을 더 쉽게 만들어 줍니다!" ...새로운 버전을 사용하고 싶어하고 전체 프로젝트를 다시 작성해야 할 때까지.처음에 순수 자바스크립트를 사용하여 무의미한 유지보수를 무효화합니다.행운을 빕니다.

---

2021-09-24: 약 1년 전부터 Rich Editor II에 대한 작업을 재개하여 스타일이 변경된 코드를 100,515자에서 ~6,000자로 변환하고 파일 요청(압축 후 유효 대역폭)을 전체 3분의 1로 줄입니다.성공을 위한 핵심 요소는 다음과 같습니다.

1. 그anchorNode그리고.focusNode왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 선택하는 경우에 따라 전환할 수 있습니다.(플랫폼에) 왜 그것이 중요한지에 대한 어떤 정당성도 찾을 수 없었기 때문에 저는 다음과 같이 만들었습니다.an(에 대한) 이의 제기anchorNode ) 왼과오 에쪽른쪽▁)에오.fn(에 대한) 이의 제기focusNode 항상 오른쪽에 있습니다.

2. Gecko/Presto 문제는 1,700자까지 사용하여 해결했습니다. 먼저 사이트(Rich 형식의 페이지 방문)에서 확인할 수 있습니다.

3. 수많은 교환을 통해 선택하는 문제를 해결하기 위해<s>,<sub>,<sup>,<u>etc 예를 ) etc (간단고매복우예모테함야해스트되다두니)를 사용하게 .window.getSelection().getRangeAt(0).commonAncestorContainer와 함께cloneNode그리고 나서 처리하기 전에 선택에 포함되지 않은 것을 벗겨냈습니다.그러면 그냥.window.getSelection().deleteFromDocument();다음을 통해 선택 영역을 제거하고 새 스타일 요소로 대체합니다.document.createElement가 쉽게 할 수 것.appendChild 및삽위에 그것을 .window.getSelection().getRangeAt(0).insertNode(id_('editor_rich_text').firstChild);.

Waterfox, Pale Moon 및 현재 완전히 파괴된 Firefox와 같은 Gecko 브라우저를 사용하면 텍스트의 여러 인스턴스를 선택할 수 있습니다.그렇게 하려면 간단히 다음을 잡으십시오.Control키를 눌러 추가 선택 항목을 만듭니다.어떤 의미 있는 방식으로도 도움이 되지 않기 때문에(그리고 이것은 이미 있는 그대로 충분히 복잡합니다), 저는 이 때 그것을 지원하기 위해 최선을 다하지 않았습니다.

새로운 변경 사항을 반영하기 위해 오늘 또는 이번 주말에 플랫폼을 업데이트할 예정입니다.Gecko 브라우저에 문제가 많아서 오래된 코드를 많이 보관하고 있습니다.저는 기능을 확장하고 수많은 버그를 해결했으며, 평소처럼 차고(프레임워크 또는 라이브러리)를 사용하지 않아도 되었습니다.

---

이 있는 DOM 데 의지해야 합니다. 2021-09-26: redo/undo 파일을 저장할 수 있습니다.물론, 그것들이 엄청나게 복잡하겠지만 그것을 구현할 다른 방법이 있을 수 있습니다.기본적으로 다음을 사용하여 편집기 상위 요소의 복사본을 만듭니다..cloneNode그리고 나서 그것이 기억에 남는 동안 무언가를 사용하세요.while (e.firstChild) {xml += new XMLSerializer().serializeToString(e.firstChild);}텍스트로 저장하기 때문에 DOM이 가지고 있는 큰 메모리 영향은 없습니다.당신은 문자 그대로 편집기의 전체 DOM을 대체할 뿐만 아니라 변경사항의 모든 반복을 추적하게 되므로 여전히 큰 프로젝트가 될 것입니다.제 플랫폼의 경우 지금 당장은 필요하지 않지만, 댓글에 언급된 사람들이 있기 때문에 이 문제를 다루고 싶었습니다.

다음을 사용할 수 있습니다.

navigator.clipboard.writeText('text to be copied');

그것은 정확히 같은 일을 합니다.document.execCommand("copy");

대체 방법은 입력 이벤트 레벨 2가 될 것으로 보입니다.

직접 만든 위지위그 편집기를 만드는 것은 매우 매력적이지만, 저는 개인적으로 새로운 표준이 도착할 때까지 execCommand를 고수할 것입니다.왜냐하면 우리 모두는 현재의 작업 솔루션을 재사용하는 대신 전체 편집자를 우리 스스로 프로그래밍할 것이기 때문입니다.

의 document.execCommand()API로, 를통클입 API를 통해 됩니다.navigator.clipboardMDN 웹 문서별(https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) :

이 API는 document.execCommand()를 사용하여 클립보드에 액세스하는 것을 대체하도록 설계되었습니다.

편집: 위에서 인용한 텍스트뿐만 아니라 설명에서도 언급했듯이, 이는 일부 요구 사항(클립보드 액세스)만 충족합니다.

여기서 결론은 w3C가 다음과 관련된 경고를 가지고 있음에도 불구하고execCommand()Javascript 버전 라이브러리를 사용하는 결과를 가져오지 않는 한 2022년 현재에도 여전히 작동하고 있으며 표준 대안은 없습니다.

참조 문서에는 경고로 나와 있습니다.

앞으로 두 사양이 모두 콘텐츠 편집 가능 이벤트와 입력 이벤트로 대체될 것으로 예상됩니다.

그리고 모든 예측대로, 확신을 갖기 위해 기다려 주세요.

다음을 사용하여 WYSIWYG 편집기를 만들 수 있습니다.

window.getSelection()

하지만 현재 execCommand를 계속 사용하는 것은 문제가 되지 않습니다.

에 아무런 문제가 없습니다.document.execCommand는 문는입니다.HTML 4이 기능의 후드 아래에서 사용되는 표준은 더 이상 널리 지원되지 않습니다.를 들면, 들면를예,FontSize는 명령사를 사용합니다.<font>더 이상 사용되지 않는 태그입니다.하지만 좋은 소식도 있습니다.그 첫째는입니다.document.execCommand자바스크립트와 두 번째 스크립트에서 절대 제거되지 않을 것입니다 - 사용할 수 있습니다.insertHTML원하는 HTML을 삽입할 수 있는 명령입니다.

function FontSize40px(){
   var spanString = `
   <span
      style="font-size: 40px;"
   >${ document.getSelection().toString()}
  </span>
   `
   
   document.execCommand('insertHTML', false, spanString);
}

그냥 멍청한 예야 :)

클립보드.js라는 라이브러리가 있어 이 프로세스를 훨씬 쉽게 수행할 수 있습니다.data-target과 함께 data-target-target-action 태그를 붙이기만 하면 됩니다.

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
    Copy to clipboard
</button>

언급URL : https://stackoverflow.com/questions/60581285/execcommand-is-now-obsolete-whats-the-alternative