Editor Visual Wordpress Mengupas Perubahan HTML

8

Ketika saya menggunakan editor WordPress HTML untuk menambahkan ikon icomoon seperti ini:

<span class="icon-shield"></span>

dan kemudian beralih ke editor visual dan kemudian kembali ke editor HTML, ikonnya hilang. Saya mencoba memasukkan sedikit Javascript ini untuk memperbaikinya. Saya melihat wp_enqueue_scripts dan meletakkan ini di functions.php, tetapi masih tidak memperbaiki masalah.

function oakwood_tinymcefix() {
    wp_enqueue_script( 'tiny_mce' );
    echo '<script type="text/javascript">'
   , 'tinymce.init({
            ...
            extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
        });'
   , '</script>';
}
add_action( 'admin_enqueue_scripts', 'oakwood_tinymcefix' );

Bagaimana saya bisa memperbaikinya?

mcography
sumber
Sebagai permulaan, elips ...tidak Javascript yang valid, dan sering digunakan untuk menunjukkan kelalaian konten. Dalam hal ini, saya percaya penulis dokumen yang ditujukan bagi Anda untuk menyediakan konfigurasi TinyMCE Anda sendiri di mana elipsis ada. Selain itu, Anda telah menggunakan nilai default dari dokumen yang secara eksplisit menyatakan itu menggantikan imgaturan TinyMCE - ini tidak melakukan apa-apa untuk spanmasalah Anda . Anda memiliki peluang yang lebih baik untuk menerima jawaban yang valid semakin banyak upaya penelitian yang Anda tampilkan - silakan menghabiskan lebih banyak waktu dengan dokumen TinyMCE.
bosco
Secara khusus, para valid_elementsdokumentasi pilihan akan membantu Anda mencari tahu apa yang Anda harus harus melewati ke extended_valid_elementspilihan. Saya belum membaca dokumen, tetapi mungkin akan terlihat sangat mirip dengan"span[class|id|title|style]"
bosco
Terima kasih. Saya tidak tahu Javascript, jadi saya hanya berasumsi potongan itu akan berfungsi. Salahku.
mcography
1
Jangan tersinggung, tetapi Anda benar-benar tidak boleh menggunakan kode yang tidak Anda mengerti. Itu adalah impian peretas, bukan? Dapatkan pengguna untuk menginstal kode (yang kebetulan berbahaya).
s_ha_dum
Setelah beberapa penelitian, masalah ini tampaknya agak lebih kompleks daripada yang saya pikirkan. Saya akan menambahkan temuan saya dan solusi / solusi apa pun hari ini. Selain itu: @s_ha_dum menampilkan poin yang sangat valid. Jika Anda berencana untuk meluangkan waktu bekerja dengan mengutak-atik / mengembangkan pada / untuk WordPress dalam kapasitas apa pun, Anda harus meluangkan waktu untuk membiasakan diri dengan teknologi dasar - bahkan pemahaman dasar dapat membantu Anda memecahkan masalah dan mengajukan pertanyaan bagus, belum lagi menjaga keamanan situs Anda.
bosco

Jawaban:

8

Latar Belakang

Masalah ini berkisar pada penghapusan <span></span>elemen kosong di TinyMCE saat menyimpan posting atau beralih di antara tab editor Visualdan Text. Masalahnya melekat pada fungsionalitas inti (seperti versi trunk 4.0-alpha-20140602) dan tidak dapat diubah melalui API WordPress standar, seperti yang disebutkan dalam tiket # 26986 . Tiket merinci alasan di balik pengaturan dan ditandai sebagai wont-fix, yang berarti bahwa taruhan terbaik Anda adalah salah satu dari "work-arounds" yang tercantum di bawah ini.

Perilaku WordPress / TinyMCE Default

Secara default, instance TinyMCE dari WordPress dikonfigurasikan sedemikian rupa sehingga sejumlah tag kosong atau tag yang hilang atribut tertentu dihapus dalam upaya untuk menghilangkan markup yang tidak melakukan apa pun.

Dari dokumen MDN<span> :

Elemen HTML adalah wadah inline umum untuk konten ungkapan, yang secara inheren tidak mewakili apa pun. Ini dapat digunakan untuk mengelompokkan elemen untuk keperluan penataan (menggunakan atribut class atau id), atau karena mereka membagikan nilai atribut, seperti lang. Ini harus digunakan hanya ketika tidak ada elemen semantik lain yang sesuai.

Seperti <span>yang dimaksudkan untuk mengelompokkan elemen / konten sebaris, kontributor inti WordPress telah memutuskan bahwa elemen tersebut harus tidak relevan ketika tag kosong dan karenanya menghapusnya dari konten.


Bekerja-Sekitar

Untuk sebagian besar, cara yang tepat untuk memodifikasi konfigurasi TinyMCE adalah dengan menghubungkan ke tiny_mce_before_initfilter tetapi spanperilaku penghapusan kosong tidak dapat dimodifikasi dengan cara ini. Untuk melakukannya kemungkinan diperlukan peretasan ke file inti, dan karena itu saya belum memberikan solusi apa pun untuk dipertimbangkan.

Ideal: Berikan <span>Teks Pembaca Layar

Pembaca layar adalah bagian dari perangkat lunak yang mencoba menafsirkan konten di layar untuk membantu para tuna netra. Saat memproses halaman web, sebagian besar pembaca layar menonaktifkan CSS (dan Javascript) sepenuhnya atau hanya memproses sub-set, sehingga hal-hal yang biasanya disembunyikan oleh CSS pada akhirnya akan diproses seolah-olah itu terlihat. Web-devs secara tradisional mengeksploitasi perilaku ini atas nama aksesibilitas dengan membuat kelas CSS yang dapat diterapkan pada elemen yang akan menyembunyikan mereka dari semua orang yang memiliki CSS diaktifkan, sesuatu seperti :

.screen-reader-text {
    position: absolute !important;
    height: 1px;
    width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

Dengan kelas ini tersedia (stylesheet tema Anda kemungkinan memiliki kelas yang sama), di dalam rentang ikon Anda, Anda dapat menambahkan rentang "pembaca layar" kedua yang tidak akan (atau setidaknya tampak) di-render di layar tetapi akan memberikan pembaca layar alternatif yang dapat diakses untuk ikon Anda, mirip dengan cara kerja altatribut pada <img>:

<span class="icon-shield"><span class="screen-reader-text">Security</span></span>

Di atas akan menampilkan ikon Anda ketika CSS diaktifkan, dan pembaca layar akan menafsirkan "Keamanan" di tempatnya.

Berikan <span>Konten Yang Tidak Terlihat

Untuk mencegah agar <span>tidak dihapus, Anda dapat menambahkan konten yang tidak ditampilkan secara eksplisit:

  • Menambahkan karakter spasi antara tag pembuka dan penutup sudah cukup. Namun, saat ruang kosong kosong dilucuti, Anda perlu menambahkan karakter melalui &nbsp;entitas HTML. Karakter ini akan dikonversi menjadi ruang normal setelah Anda beralih tab atau menyimpan, namun tidak akan dihapus dari markup. Perhatikan bahwa ini dapat memengaruhi ukuran rentang Anda, seperti halnya jika Anda menempatkan satu huruf di elemen:

    <span class="icon-shield">&nbsp;</span>

  • Dengan asumsi Anda bekerja dengan set karakter UTF-8, Anda dapat menggunakan karakter "soft-hyphen" melalui entitas HTML &shy;. Tidak seperti itu &nbsp;, karakter soft-hypen dibuat seolah-olah itu tidak memakan ruang, dan seharusnya tidak mempengaruhi ukuran rentang Anda:

    <span class="icon-shield">&shy;</span>

Gunakan Elemen Alternatif

Sementara TinyMCE WordPress dikonfigurasikan untuk menghapus <span>elemen yang kosong , ada sejumlah tag lain yang dikonfigurasi secara default untuk memungkinkan yang ada tanpa konten. Dalam komentar tiket # 26.986 , TobiasBg merekomendasikan menggunakan<i> ( <em>, <b>, dan <strong>adalah beberapa kemungkinan lain). Lihat pertanyaan Stack Overflow ini untuk mengetahui lebih lanjut tentang praktik menggunakan <i>ikon.

<i class="icon-shield"></i>

Buat Mesin Virtual TinyMCE Anda Sendiri

Ini mungkin solusi paling rumit dan umumnya tidak masuk akal yang tersedia, dan karena itu saya tidak akan memberikan implementasi. Dengan menggunakan plugin, seharusnya dimungkinkan untuk memuat contoh terpisah dari skrip TinyMCE, konfigurasikan sesuai keinginan Anda (di luar opsi yang ditampilkan WordPress), dan ganti editor default (atau sembunyikan dan tambahkan metabox pengganti). Meskipun memungkinkan Anda untuk menonaktifkan penghapusan bentang kosong, jumlah waktu yang diperlukan untuk menyempurnakan implementasi seperti itu kemungkinan akan jauh lebih besar daripada manfaatnya.

bosco
sumber
Terima kasih banyak, @boscho! Saya sangat menghargai Anda meluangkan waktu untuk membantu saya. Saya harus keluar sekarang, tetapi saya akan melihat saran Anda nanti malam.
mcography
<I> elemen dilucuti juga. Tampaknya hanya saja tidak dilucuti.
EHerman
@ EHerman Saya baru saja melakukan beberapa percobaan, dan setiap ielemen kosong hingga yang paling sederhana <i></i>dipertahankan selama pembuatan kiriman baru dan modifikasi selanjutnya - tidak ada yang dilepaskan dari konten. Saya juga tidak bisa mengidentifikasi perilaku seperti itu dalam basis kode inti. Bisakah Anda memberikan kasus penggunaan untuk WordPress stripping ielemen kosong ?
bosco
Metode lain untuk menyiasatinya adalah dengan membuat kode pendek yang memasukkan ikon ke dalam konten. Sesuatu seperti [icon class = shield]. Ini membuat ikon juga dapat diedit saat menggunakan editor visual.
HU ist Sebastian
1
Alternatif lain adalah dengan meletakkan komentar HTML di dalam elemen span <span class="icon-shield"><!-- icon --></span>. Ini tidak memakan ruang seperti &nbsp;halnya dan mencegah TinyMCE menghapus elemen.
j08691