Bagaimana untuk memintas lompat tag dan menyesuaikan logik lompat dalam ckeditor5?

Penjelasan terperinci mengenai CKEditor5 memintas lompat tag dan logik lompat tersuai

Artikel ini memperkenalkan bagaimana untuk memintas tingkah laku lompat lalai tag dalam editor teks kaya CKEditor5 dan melaksanakan logik lompat adat. Selepas menambah pautan dan pemalam Autolink, secara lalai, pengguna menekan kekunci Ctrl/Command dan klik pada pautan semasa mengkliknya, dan ia akan melompat ke halaman baru. Tetapi dalam aplikasi praktikal, kita mungkin perlu memintas lompatan ini, mendapatkan alamat pautan dan melakukan tindakan tersuai, seperti analisis data atau melompat ke halaman tertentu. Terus masuk<a></a> Acara onclick yang mengikat pada tag tidak sah kerana mekanisme dalaman ckeditor5 akan menetapkan semula atribut tag. Traversal dan mengubah suai semua<a></a> Atribut href tag juga akan dibatalkan kerana kemas kini editor.

Penyelesaian: Gunakan mekanisme penangkapan acara

Untuk menyelesaikan masalah di atas, kami menggunakan mekanisme penangkapan acara untuk mendengar acara klik. Tambahkan pendengar acara ke bekas editor untuk menentukan sama ada sasaran klik adalah<a></a> Tag, memintas lompat lalai.

Coretan kod berikut menunjukkan cara melaksanakannya:

 document.getElementById ('Editor'). AddEventListener ('klik', (e) => {
  jika (e.target.tagName === 'a') {// Tentukan sama ada ia adalah tag e.PreVentDefault (); // Mencegah lompat lalai const href = e.target.getAttribute ('href');
    console.log ('Link yang ditangkap:', href);
    const ismac = /macintosh | mac os x /i.test (navigator.useragent);
    jika ((ismac && e.metakey) || e.ctrlkey) {
      console.log ('ctrl/command kekunci ditekan.');
      // Tambah logik lompat tersuai di sini // sebagai contoh: Gunakan ambil atau xmlhttprequest untuk menghantar permintaan, atau lompat ke halaman lain // window.location.href = 'your_custom_url' href; 
      // atau gunakan logik yang lebih kompleks untuk memproses href
    }
  }
}, benar); // Benar Enable Acara Tangkap

Penerangan Kod:

• addEventListener('click', ..., true) : Gunakan mod penangkapan acara untuk memastikan bahawa peristiwa dipintas sebelum CKEditor5 menetapkan semula sifat.
• e.preventDefault() : Mencegah tingkah laku lompat lalai.
• e.target.getAttribute('href') : Dapatkan<a></a> Atribut href tag.
• isMac : Hakim sistem operasi, serasi dengan sistem MAC dan Windows.
• e.metaKey (Mac) / e.ctrlKey (Windows): Tentukan sama ada untuk menekan kekunci Ctrl / Command.
• 'your_custom_url' href : Ini adalah contoh yang anda perlukan untuk menggantikan dengan logik dan url tersuai anda. Bahagian ini boleh diproses dengan lebih kompleks mengikut keperluan anda, seperti menghantar permintaan AJAX ke pelayan untuk pemprosesan data sebelum memutuskan sama ada untuk melompat.

Melalui mekanisme penangkapan acara, kami berjaya memintas ckeditor5<a></a> Lompat lalai dari tag dan melaksanakan logik tersuai apabila menekan kekunci Ctrl/Command, mengelakkan pengubahsuaian langsung<a></a> Masalah yang disebabkan oleh atribut tag adalah diset semula oleh ckeditor5. Ingatlah untuk menggantikan 'your_custom_url' dengan logik pemprosesan sebenar anda.

Atas ialah kandungan terperinci Bagaimana untuk memintas lompat tag dan menyesuaikan logik lompat dalam ckeditor5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!