Beralih di antara tab Visual dan HTML secara bebas

Jadi pertanyaan ini telah muncul berkali-kali di bawah bendera yang berbeda, namun saya ingin menyajikan utas terpadu untuk solusi terbaik untuk masalah ini.

Di WordPress, secara default, ketika berpindah-pindah antara HTML dan editor Visual di TinyMCE, tag tertentu dilucuti dari konten, dan fungsi aneh lainnya terjadi. Dua solusi yang diketahui untuk menulis kode HTML yang lebih efisien menggunakan menghapus fungsi wp_auto_p menggunakan filter, dan menginstal TinyMCE Advanced & mengaktifkan opsi "berhenti menghapus tag p & br".

Sayangnya, ini hanya bekerja dengan baik.

Ambil, misalnya, contoh berikut:

<h2>How does it work?</h2>
<p>In order to use jQuery Easy Columns, you must install it as you would any other jQuery plugin.  First, download the zip file using the button above.  After downloading the file, extract it to a location of your choice, and move the extracted folder to your server using your favorite FTP client.  After moving the plugin to your server (and of course calling the jQuery source into your document), call it in on your site using the following snippet of code:</p>
<pre>
&lt;script type=&quot;text/javascript&quot; src=&quot;/path/to/jquery.easycolumns.js&quot;&gt;&lt;/script&gt;
</pre>

Jika saya mengetikkan kode ini ke editor HTML, dengan kedua opsi yang tercantum di atas sudah diaktifkan, maka ketika saya beralih di antara dua editor yang berbeda, tidak ada yang terjadi, yang diharapkan. Sayangnya, ketika menyimpan, kode secara otomatis dikonversi ke ini:

<h2>How does it work?</h2>
<p>In order to use jQuery Easy Columns, you must install it as you would any other jQuery plugin.  First, download the zip file using the button above.  After downloading the file, extract it to a location of your choice, and move the extracted folder to your server using your favorite FTP client.  After moving the plugin to your server (and of course calling the jQuery source into your document), call it in on your site using the following snippet of code:</p>
<pre>
<script type="text/javascript" src="/path/to/jquery.easycolumns.js"></script>
</pre>

Seperti yang Anda lihat, semua entitas di dalam tag pra dikonversi kembali ke karakter HTML yang sebenarnya. Lalu, jika saya menyimpan posting yang sama ini lagi, saya mendapatkan sesuatu seperti berikut:

<h2>How does it work?</h2>
<p>In order to use jQuery Easy Columns, you must install it as you would any other jQuery plugin.  First, download the zip file using the button above.  After downloading the file, extract it to a location of your choice, and move the extracted folder to your server using your favorite FTP client.  After moving the plugin to your server (and of course calling the jQuery source into your document), call it in on your site using the following snippet of code:</p>
<pre><br />
<script type="text/javascript" src="/path/to/jquery.easycolumns.js"></script><br />
</pre>

Perhatikan bahwa Wordpress akan benar-benar menyuntikkan br tag ke dalam postingan. Tak perlu dikatakan, ketika posting ini telah diperbarui beberapa kali, ketika melihatnya di frontend, layar tidak berada di dekat tampilan yang dimaksud.

Satu-satunya cara saya sepertinya menyingkirkan semua "fungsi pemformatan" yang ditambahkan adalah dengan menonaktifkan editor Visual melalui profil saya.

Ini adalah solusi yang baik bagi saya, mengingat saya seorang pengembang web profesional. Untuk klien saya, solusi ini jauh dari anggun. Klien saya sebagian besar akan menggunakan editor visual. Banyak klien saya yang tidak terlalu mengerti teknologi, dan kadang-kadang membutuhkan saya untuk memperbaiki posting mereka ketika tata letak rusak. Ini membatasi saya untuk menggunakan editor visual, karena saya tidak dapat mengubah ke editor HTML tanpa takut melanggar tata letak.

Terutama, (dan saya pikir ada komunitas besar yang dapat mengambil manfaat dari jawaban ini), langkah eksplisit apa yang dapat saya ikuti untuk memastikan hal berikut:

1. Posting dapat diedit dari editor Visual atau HTML.
2. Konten posting tidak dimodifikasi dengan cara apa pun saat beralih di antara kedua tab.
3. Saat menyimpan posting dari editor HTML, tidak ada konten tambahan yang ditambahkan.
4. Saat menyimpan posting dari editor HTML, tidak ada entitas yang dikonversi.
5. BONUS: Saat menyimpan posting dari editor HTML, kode apa pun (HTML misalnya) yang dibungkus dengan tag pra dan belum dikonversi ke entitas akan secara otomatis dikonversi ke entitas.

Pada dasarnya, jika kita dapat membuat perilaku yang disebutkan di TinyMCE melalui penggunaan plugin pihak ketiga, kita dapat memadamkan semua pertanyaan lain tentang pemformatan yang salah melalui penggunaan TinyMCE. Saya merasa bahwa banyak orang dapat mengambil manfaat dari ini.

Tampaknya logis bahwa ada fungsi tertentu yang diharapkan dari editor WYSIWIG, dan ini bertentangan dengannya. Menurut semua logika dan alasan, fungsi pemformatan bawaan Wordpress sangat tidak berguna dengan pengaturannya saat ini. Menurut saya, jika mereka ingin menggunakan opsi pemformatan ini, taruhan terbaik mereka adalah mengaktifkan satu editor atau yang lain, bukan keduanya.

DAN TOLONG: Jangan jawab utas ini dengan pemecahan masalah dan unduhan untuk editor WYSIWIG lain yang 'memperbaiki' masalah. Ini adalah masalah mendasar (walaupun bukan bug) dengan inti Wordpress yang perlu diperbaiki.

EDIT : Baiklah, saya sudah mengerjakan ini dan saya berpikir reverse engineering akan menjadi cara terbaik untuk menyelesaikan masalah ini. Jadi untuk saat ini, saya telah menonaktifkan wpautop (yang hanya untuk kejelasan adalah fungsi yang menghubungkan ke filter "the_content" untuk menambahkan tag p dan br sebelum teks ditampilkan , bukan ketika teks disimpan. Saya pikir ada beberapa kebingungan tentang bagaimana fungsi ini beroperasi. wpautop tidak bertanggung jawab atas perubahan yang Anda lihat terjadi ketika Anda beralih di antara tab editor. Itu sesuatu yang sama sekali berbeda.

Bagaimanapun, saya telah menonaktifkan wpautop, seperti praktik yang baik ketika Anda menggunakan editor HTML. Sejak saat itu, saya menonaktifkan editor visual untuk memulai pertama dengan kesalahan html entitas yang ada saat menyimpan posting. Berkat bantuan satu C. Bavota, saya menemukan cuplikan untuk mengonversi tag apa pun di editor HTML ke entitas yang setara sebelum menampilkannya di ujung depan situs (kredit: http://bavotasan.com/2012/convert -pre-tag-content-to-html-entitas-di-wordpress / ).

#add_filter( 'the_content', 'pre_content_filter', 0 );
/**
 * Converts pre tag contents to HTML entities 
 *
 * This function is attached to the 'the_content' filter hook.
 *
 * @author c.bavota
 */

function pre_content_filter( $content ) {
        return preg_replace_callback( '|<pre.*>(.*)</pre|isU' , 'convert_pre_entities', $content );
}


function convert_pre_entities( $matches ) {
        return str_replace( $matches[1], htmlentities($matches[1] ), $matches[0] );
}

add_filter( 'the_content', 'pre_content_filter', 10, 2 ); 

Ini secara efektif menghilangkan masalah dengan Wordpress mengubah semua entitas menjadi tag setelah menyimpan dengan mengelak dari itu. Sekarang, Anda dapat menggunakan editor HTML, dan menulis kode standar di antara tag "pra" tanpa melakukan konversi entitas sendiri. Ini menangani semua masalah dengan konversi entitas di Wordpress, dan memastikan semuanya ditampilkan dengan benar di ujung depan. Sekarang, kita perlu mencari tahu apa yang harus dihubungkan untuk mengubah perilaku yang dialami saat mengklik bolak-balik di antara tab. Saat ini, akan terlihat bahwa ketika berpindah dari HTML ke tab visual, isi dari tab HTML diinterpretasikan oleh javascript atau sesuatu untuk mencoba memberikan pembaruan langsung seperti apa konten itu seharusnya. Ini menyebabkan tag (yang ditampilkan dalam bentuk non entitas di tab HTML) diproses dan bukannya ditampilkan. Kemudian, ketika beralih kembali ke tab HTML, akan muncul bahwa TinyMCE meneruskan data saat ini. Ini berarti ketika Anda beralih kembali, Anda kehilangan struktur HTML Anda. Kita perlu mencari cara untuk memberitahu TinyMCE untuk mengonversi semua yang ada di tag pra ke entitas yang setara sebelum memuatnya ke jendela (pada dasarnya versi backend dari apa yang kita lakukan di frontend tetapi dengan tinymce dan javascript, bukan php dan kait), sehingga itu ditampilkan alih-alih diproses. Saran? entitas yang setara sebelum memuatnya ke jendela (pada dasarnya versi backend dari apa yang kami lakukan di frontend tetapi dengan tinymce dan javascript alih-alih php dan kait), sehingga ditampilkan bukan diproses. Saran? entitas yang setara sebelum memuatnya ke jendela (pada dasarnya versi backend dari apa yang kami lakukan di frontend tetapi dengan tinymce dan javascript alih-alih php dan kait), sehingga ditampilkan bukan diproses. Saran?

EDIT 2 :

Setelah beberapa penelitian lebih lanjut, mengubah entitas di tag pra ketika mereka ditampilkan berfungsi dengan baik untuk konten dalam tag pra, tetapi katakan saya memiliki posting blog dengan garis seperti ini:

"Selanjutnya, kita perlu menambahkan baris ini ke file HTML kita: <p> Halo, Dunia! </p>"

Melihat baris ini, Anda dapat mengetahui bahwa kode tersebut seharusnya ditampilkan di situs, dan tidak diuraikan, namun ketika pos disimpan, entitas ini diterjemahkan pada beban pengeditan posting berikutnya, dan pada setiap penyimpanan berikutnya mereka disimpan sebagai tag html mentah, yang menyebabkan mereka diuraikan di ujung depan. Satu-satunya solusi yang dapat saya pikirkan sejauh ini adalah menulis dalam kode yang sama untuk tag "kode" seperti yang saya gunakan untuk pra, dan kemudian hanya membungkus satu liner kecil di tag "kode", dan potongan besar di tag "pre". Adakah yang punya ide lain?

Baiklah jadi saya sudah memperbarui pertanyaan ini satu ton dan itu mulai kelebihan beban, jadi saya pikir saya akan menulis ini sebagai jawaban meskipun itu tidak penuh.

Mengekstrapolasi dari jawaban @ bueltge, saya benar-benar kembali dan menemukan posting sebelumnya dalam pertanyaan. Dalam posting itu, ada sebuah plugin yang terdaftar yang belum pernah saya lihat sebelumnya: "Preserved HTML Editor Markup". Plugin ini belum diperbarui untuk sementara, tetapi saya baru saja mengujinya dengan WP 3.6.1 dan berfungsi penuh. Plugin ini secara otomatis menangani wpautop, menyediakan format terpadu untuk menyisipkan tag br dan p dalam editor visual, dan mempertahankan markup Anda saat beralih antar tab.

Untuk tujuan saya sendiri, saya memperluas plugin ini dengan fungsionalitas saya sendiri: konversi otomatis tag html apa pun dalam tag "<code>" ke entitas masing-masing di save. Ini berarti Anda dapat menulis kode HTML standar dalam tag kode dalam tab teks, dan kemudian menyimpannya, dan semua hal dalam tag pra akan dikonversi menjadi entitas untuk tampilan yang tepat di ujung depan situs dan editor visual. Ini bukan solusi paling elegan yang saya temukan, tetapi sepertinya berhasil. Tambahkan baris ini ke functions.php Anda setelah mengaktifkan plugin:

function code_content_conversion_filter( $content ) {
        return preg_replace_callback( '|<code.*>(.*)</code|isU' , 'convert_entities', $content );
}

function convert_entities( $matches ) {
        return str_replace( $matches[1], htmlspecialchars($matches[1], ENT_QUOTES | ENT_HTML5, 'UTF-8', FALSE ), $matches[0] );
}

add_filter( 'content_save_pre', 'code_content_conversion_filter', 0);

Sekarang, cukup ketik HTML apa pun yang valid di antara tag kode, dan ketika Anda menyimpan, ketika editor muncul kembali, semuanya akan dikonversi menjadi entitas. Ini memungkinkan Anda untuk menulis kode lebih cepat. Sekarang, satu-satunya hal yang masih menjadi masalah adalah jika Anda memiliki bidang "pra" dengan tag kode bersarang dan HTML di dalamnya, dan Anda pergi ke tab visual dan mencoba untuk memasukkan baris baru ke dalam kode, tag br akan disuntikkan ke tag kode Anda dalam HTML. Harus ada opsi untuk menonaktifkan ini di TinyMCE. Apa pun, selama Anda mengedit bidang pra dari tab teks, Anda dapat dengan bebas beralih di antara tab, menambahkan konten apa pun di bawah tab apa pun, menyimpan dari tab mana pun, dan tidak perlu khawatir tentang pemformatan yang kacau!

Ini sebenarnya memecahkan semua 5 poin dari pertanyaan awal saya. Poin 2 masih agak serpihan, tapi saya percaya untuk sebagian besar tujuan orang, ini menangani masalah ini. Saya berencana memilah-milah plugin ini di beberapa titik dan mengekstraksi bagian-bagian yang diperlukan, menggabungkannya dengan temuan saya, dan mengemasnya kembali untuk diunduh publik. Tujuan saya di sini adalah membuat plugin instal satu klik sederhana yang sesuai dengan yang diharapkan.

Semoga ini bisa membantu semua orang!

Pada awalnya, saya pikir masalah ini telah dipecahkan sejak WP versi 3.5; lihat tiket 19666 di trac . Tetapi tinyMCE memiliki kaitan di sana memberi kami kesempatan untuk mengubah konten di dalam editor dan Anda tidak boleh menguraikan output di frontend.

Skrip sumber kecil. Saya tidak menguji ini dengan versi WP saat ini, adalah solusi yang lebih tua untuk pelanggan.

Tambahkan sumber ini melalui plugin dan tingkatkan markup. Fungsi memeriksa tag-html <predan jika ada, maka akan diganti dengan markup.

add_filter( 'tiny_mce_before_init', 'fb_correction_content_tiny_mce' );

function fb_correction_content_tiny_mce( $init ) {

    $init['setup'] = "function(ed) {
        ed.onBeforeSetContent.add( function(ed, o) {

            if ( o.content.indexOf('<pre') != -1 ) {
                o.content = o.content.replace(
                    /<pre[^>]*>[\\s\\S]+?<\\/pre>/g,
                    function(a) {
                        return a.replace(/(\\r\\n|\\n)/g, '<br />');
                    }
                );
            }
        } );
    }";

    return $init;
}

Aku punya masalah yang sama dengan OP, tapi bagi saya ada masalah dengan menjaga <h1>di <div>. Inilah yang ingin saya pertahankan saat beralih antara tab Teks dan Visual:

Setiap kali saya beralih tab <h1>menghilang. Saya melakukan banyak pencarian, dan untuk Wordpress 4.7.3 saya menemukan ada banyak perbaikan yang sudah ketinggalan zaman. Ada peningkatan walikota TinyMCE dari versi 3 ke 4. Solusi untuk v.3 tidak berhasil untuk v.4. Setelah lebih banyak googling dan membaca dokumentasi asli TinyMCE versi 4, saya menemukan solusi untuk kasus saya:

1. Instal plugin Advanced TinyMCE Configuration
2. atur valid_childrenpengaturan TinyMCE ke+div[h1],h1[div]
3. Saya additonnaly dikonfigurasi indent=true, forced_root_block=falsedanschema=html5 (ketika saya membaca forced_root_blockdeskripsi saya memahaminya sebagai wpautoppengganti)

Akibatnya saya mendapatkan ini (dan itu tahan terhadap penggantian tab)