CKEDITOR5에서 태그 점프를 가로 채고 점프 로직을 사용자 정의하는 방법은 무엇입니까?

CKEDITOR5의 자세한 설명은 태그 점프 및 사용자 정의 점프 논리를 가로 채립니다.

이 기사는 CKEDITOR5 RICH TEXT 편집기에서 A 태그의 기본 점프 동작을 가로 채고 사용자 정의 점프 로직을 구현하는 방법을 소개합니다. 링크 및 자동 링크 플러그인을 추가 한 후 기본적으로 사용자는 CTRL/명령 키를 누르고 링크를 클릭하면서 클릭하면 새 페이지로 이동합니다. 그러나 실제 애플리케이션에서는이 점프를 가로 채고, 링크 주소를 가져오고, 데이터 분석과 같은 사용자 정의 작업을 수행하거나 특정 페이지로 이동해야 할 수도 있습니다. 직접<a></a> CKEDITOR5의 내부 메커니즘이 태그 속성을 재설정하기 때문에 태그의 바인딩 onclick 이벤트는 유효하지 않습니다. 트래버스하고 모든 것을 수정하십시오<a></a> 에디터 업데이트로 인해 태그의 href 속성도 무효화됩니다.

해결책 : 이벤트 캡처 메커니즘을 활용하십시오

위의 문제를 해결하기 위해 이벤트 캡처 메커니즘을 사용하여 클릭 이벤트를 듣습니다. 클릭 대상이<a></a> 태그, 차단 기본 점프.

다음 코드 스 니펫은 구현 방법을 보여줍니다.

 document.getElementById ( 'editor'). addeventListener ( 'click', (e) => {
  if (e.target.tagname === 'a') {// 태그인지 여부를 결정합니다 e.preventDefault (); // 기본 점프를 방지 const href = e.target.getAttribute ( 'href');
    console.log ( '캡처 된 링크 :', href);
    const ismac = /macintosh | mac os x /i.test (navigator.useragent);
    if ((ismac && e.metakey) || e.ctrlkey) {
      Console.log ( 'Ctrl/Command Key Press.');
      // 여기에 사용자 정의 점프 로직 추가 // 예를 들면 : fetch 또는 xmlhttprequest를 사용하여 요청을 보내거나 다른 페이지로 점프하십시오. 
      // 또는 더 복잡한 논리를 사용하여 HREF를 처리합니다
    }
  }
}, 진실); // true 이벤트 캡처를 활성화합니다

코드 설명 :

• addEventListener('click', ..., true) : 이벤트 캡처 모드를 사용하여 CKEDITOR5가 속성을 재설정하기 전에 이벤트가 가로 채지는 않습니다.
• e.preventDefault() : 기본 점프 동작을 방지합니다.
• e.target.getAttribute('href') : get<a></a> 태그의 href 속성.
• isMac : Mac 및 Windows 시스템과 호환되는 운영 체제를 판단합니다.
• e.metaKey (mac) / e.ctrlKey (Windows) : ctrl / 명령 키를 누를지 여부를 결정합니다.
• 'your_custom_url' href : 이것은 사용자 정의 로직 및 URL로 교체 해야하는 예입니다. 이 부분은 점프 여부를 결정하기 전에 데이터 처리를 위해 서버에 AJAX 요청을 보내는 것과 같이 귀하의 요구에 따라보다 복잡하게 처리 될 수 있습니다.

이벤트 캡처 메커니즘을 통해 CKEDITOR5를 성공적으로 차단했습니다<a></a> 태그의 기본 점프는 CTRL/명령 키를 누르면 직접 수정을 피할 때 사용자 정의 로직을 실행합니다.<a></a> 태그 속성으로 인한 문제는 ckeditor5에 의해 재설정됩니다. 'your_custom_url' 실제 처리 로직으로 바꾸는 것을 잊지 마십시오.

위 내용은 CKEDITOR5에서 태그 점프를 가로 채고 점프 로직을 사용자 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!