Visual ve HTML sekmesi arasında serbestçe geçiş yapın

Bu nedenle, bu soru farklı bayraklar altında defalarca gündeme getirildi, ancak bu konuda nihai bir çözüm için birleşik bir konu sunmak istiyorum.

WordPress'te varsayılan olarak, TinyMCE'deki HTML ve Visual editörleri arasında ileri geri geçiş yaparken, bazı etiketler içerikten çıkarılır ve başka garip işlevsellikler ortaya çıkar. Daha verimli HTML kodu yazmak için bilinen iki geçici çözüm, filtreleri kullanarak wp_auto_p işlevini kaldırmayı ve TinyMCE Gelişmiş'i yüklemeyi ve "p & br etiketlerini kaldırmayı durdur" seçeneğini etkinleştirmektir.

Bu sadece maalesef çok iyi çalışıyor.

Örneğin, aşağıdaki örneği ele alalım:

<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>

Bu kodu HTML düzenleyicisine yazarsam, yukarıda listelenen her iki seçenek de önceden etkinleştirilmişse, iki farklı düzenleyici arasında geçiş yaptığımda hiçbir şey olmuyor, bu beklenen bir şey değil. Ne yazık ki, kaydederken, kod otomatik olarak şuna dönüştürür:

<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>

Gördüğünüz gibi, ön etiketin içindeki tüm varlıklar gerçek HTML karakterlerine dönüştürülür. Sonra aynı yazıyı tekrar kaydedersem aşağıdaki gibi bir şey alıyorum:

<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>

Wordpress'in aslında br etiketlerinin yazıya ekleneceğini unutmayın. Söylemeye gerek yok, bu yayın birkaç kez güncellendiğinde, ön uçta görüntülerken, ekran istenen ekranın yakınında değil.

Eklenen "biçimlendirme işlevselliğinin" tümünden kurtulmamın tek yolu, Visual düzenleyiciyi profilim üzerinden etkisiz hale getirmekti.

Profesyonel bir web geliştiricisi olduğumu düşünerek bu benim için iyi bir çözüm. Müşterilerim için bu çözüm zarif olmaktan uzak. Müşterilerim çoğunlukla görsel editörü kullanıyor olacak. Müşterilerimin birçoğu çok teknoloji meraklısı değil ve bazen düzen bozulduğunda görevlerini düzeltmeme ihtiyacım var. Bu, beni düzenleyiciyi kırma korkusu olmadan HTML düzenleyicisine değiştirememediğim için görsel düzenleyiciyi kullanmamla sınırlandırıyor.

Temel olarak, (ve bence bu cevaptan yararlanabilecek geniş bir topluluk var), aşağıdakileri sağlamak için hangi açık adımları izleyebilirim:

1. Bir yazı Visual veya HTML editöründen düzenlenebilir.
2. İki sekme arasında geçiş yaparken bir gönderinin içeriği hiçbir şekilde değiştirilmez.
3. Bir yazıyı HTML editöründen kaydederken, fazladan içerik eklenmez.
4. Bir yazıyı HTML düzenleyiciden kaydederken, hiçbir varlık dönüştürülmez.
5. BONUS: Bir yazıyı HTML editöründen kaydederken, bir ön etiketin içine sarılmış ve zaten varlıklara dönüştürülmemiş tüm kodlar (örneğin HTML) otomatik olarak varlıklara dönüştürülür.

Temel olarak, eğer üçüncü taraf bir eklenti kullanarak TinyMCE'de yukarıda bahsedilen davranışı yaratabilirsek, TinyMCE kullanımıyla yanlış biçimlendirme ile ilgili diğer tüm soruları yanıtlayabiliriz. Bundan birçok insanın faydalanabileceğini hissediyorum.

Bir WYSIWIG editöründen beklenebilecek belirli bir işlevsellik olması mantıklı gözüküyor ve bu durum buna aykırı. Tüm mantığa ve nedene göre, biçimlendirme işlevlerinde yerleşik Wordpress 'mevcut ayarları ile oldukça işe yaramaz. Bana öyle geliyor ki, eğer bu formatlama seçeneklerini kullanmak istiyorlarsa, en iyisi, bir editörü veya diğerini etkinleştirmek olacaktır, ikisini birden değil.

VE LÜTFEN: Bu konuyu, sorunu gideren diğer WYSIWIG editörleri için geçici çözümler ve indirmelerle yanıtlamayın. Bu, düzeltilmesi gereken Wordpress çekirdeği ile ilgili temel bir sorundur (gerçekten bir hata olmasa da).

EDIT : Tamam, bu konuda çalışıyorum ve tersine mühendislik bu sorunu çözmenin en iyi yolu olacağını düşünüyorum. Bu yüzden şu anda, wpautop'u devre dışı bıraktım (sadece netlik için , metin kaydedildiğinde değil, metin görüntülenmeden önce p ve br etiketlerini eklemek için "the_content" süzgecine bağlanan bir işlevdir . Bu işlevin nasıl çalıştığıyla ilgili olarak wpautop, editör sekmeleri arasında geçiş yaptığınızda gördüğünüz değişikliklerden sorumlu değildir, bu tamamen farklı bir şeydir.

Neyse, wpautop'u devre dışı bıraktım, HTML editörünü kullanırken iyi bir uygulama. Bu noktadan sonra, bir yazıyı kaydederken mevcut olan html varlık hatalarıyla ilk önce görsel düzenleyiciyi devre dışı bıraktım. Bir C. Bavota'nın yardımı sayesinde, HTML düzenleyicideki etiketleri sitenin ön ucunda göstermeden önce eşdeğer varlıklarına dönüştürmek için bir pasaj buldum (kredi: http://bavotasan.com/2012/convert -pre-tag-içeriği-to-html-varlıkları-in-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 ); 

Bu, Wordpress'in tüm varlıkları etiketlerden çevreye kaydederek kaydetmelerine dönüştürmesini engeller. Artık, HTML editörünü kullanabilir ve varlık dönüşümü yapmadan "pre" etiketleri arasına standart kod yazabilirsiniz. Bu, Wordpress'te varlık dönüşümü ile ilgili tüm sorunların üstesinden gelir ve her şeyin ön uçta doğru görüntülendiğinden emin olur. Şimdi, sekmeler arasında ileri geri tıklarken karşılaşılan davranışı değiştirmek için neye bağlanacağımızı bulmamız gerekiyor. Şu anda, HTML'den görsel sekmeye geçerken, HTML sekmesinin içeriğinin javascript veya içeriğin neye benzemesi gerektiğine dair canlı bir güncelleme sağlamaya çalışacak bir şey tarafından yorumlandığı anlaşılıyor. Bu, (HTML sekmesinde varlık olmayan biçimde görüntülenen) etiketlerin görüntülenmek yerine işlenmesine neden olur. Sonra, HTML sekmesine geri dönüldüğünde, TinyMCE'in geçerli veriyi geçtiği anlaşılıyor. Bunun anlamı geri döndüğünüzde HTML yapınızı kaybedersiniz. TinyMCE'ye ön etiketlerdeki herşeyi pencereye yüklemeden önce eşdeğer varlıklarına dönüştürmesini söylemenin bir yolunu bulmalıyız (esas olarak ön uçta yaptığımızın arka uç sürümü, ancak php ve kanca yerine tinymce ve javascript), Böylece işlenmiş yerine görüntülenir. Öneriler? pencereye yüklemeden önce eşdeğer varlıklar (temelde ön uçta yaptığımızın arka uç sürümü, ancak php ve kanca yerine tinymce ve javascript ile). Öneriler? pencereye yüklemeden önce eşdeğer varlıklar (temelde ön uçta yaptığımızın arka uç sürümü, ancak php ve kanca yerine tinymce ve javascript ile). Öneriler?

EDIT 2 :

Daha fazla araştırma yapıldıktan sonra, ön etiket içindeki varlıkları görüntülendiklerinde dönüştürmek, ön etiket içindeki içerik için iyi çalışır, ancak şöyle bir satırda bir blog yazısı bulunduğunu söyler:

"Sonra, bu satırı HTML dosyamıza eklememiz gerekiyor: <p> Merhaba, Dünya! </p>"

Bu çizgiye bakıldığında, kodun sitede gösterilmesi ve ayrıştırılmaması gerektiğini, ancak gönderi kaydedildiğinde, bu varlıkların bir sonraki gönderi düzenleme yükünde ve sonraki her kaydetme kaydında kodu çözüldüğünü söyleyebilirsiniz. ön uçta ayrıştırılmalarına neden olan ham html etiketleri. Şu ana kadar düşünebildiğim tek çözüm, ön kod için kullandığım "code" etiketi için benzer kodda yazmak ve ardından "code" etiketindeki küçük bir gömlekleri ve "pre" etiketi. Başka fikri olan var mı?

Tamam, bu soruyu zaten bir ton güncelledim ve aşırı yüklenmeye başlıyor, bu yüzden tam olmasa da bunu bir cevap olarak yazacağımı düşündüm.

@ Bueltge'nin cevabından ekstrapolasyon, aslında geri döndüm ve söz konusu önceki yazıyı buldum. Bu yayında, daha önce hiç görmediğim bir eklenti vardı: "Korunan HTML Düzenleyicisi Biçimlendirme". Bu eklenti bir süre önce güncellenmedi, ancak WP 3.6.1 ile test ettim ve tamamen işlevsel. Bu eklenti otomatik olarak wpautop ile ilgilenir, görsel düzenleyiciye br ve p etiketlerini eklemek için birleşik bir biçim sağlar ve sekmeler arasında geçiş yaparken işaretlemenizi korur.

Kendi amaçlarıma göre, bu eklenti üzerinde kendi fonksiyonelliğimi kullandım: "<code>" etiketleri içindeki tüm html etiketlerinin kaydetme sırasında kendi varlıklarına otomatik olarak dönüştürülmesi. Bu, metin sekmesindeki kod etiketlerinde standart HTML kodunu yazabileceğiniz ve daha sonra kaydedebileceğiniz anlamına gelir ve ön etiketlerdeki tüm öğeler sitenin ön ucunda ve görsel düzenleyicide düzgün görüntülenmesi için varlıklara dönüştürülür. Bu şimdiye kadar bulduğum en şık çözüm değil ama işe yarıyor. Eklentiyi etkinleştirdikten sonra, bu satırı functions.php dosyasına ekleyin:

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);

Şimdi, sadece kod etiketleri arasına herhangi bir geçerli HTML yazın ve kaydettiğinizde, editör açıldığında, hepsi varlıklara dönüştürülür. Bu, kodunuzu daha hızlı yazmanıza olanak sağlar. Şimdi, hala sorun olan tek şey, iç içe geçmiş bir kod etiketine ve HTML'ye sahip bir "ön" alana sahipseniz ve görsel sekmeye gidip koda yeni bir satır eklemeye çalışırsanız, bir br etiketidir. HTML’deki kod etiketinize enjekte edilir. TinyMCE’de bunu devre dışı bırakma seçeneği olmalı. Ne olursa olsun, ön sekmelerinizi metin sekmesinden düzenlediğiniz sürece, sekmeler arasında serbestçe geçiş yapmaktan, herhangi bir sekmenin altına herhangi bir içerik eklemek, her iki sekmeden kaydetmek ve karışık biçimlendirme konusunda endişelenmenize gerek yok!

Bu aslında ilk sorumun 5 noktasını da çözüyor. 2. Nokta hala biraz lapa lapa, ama çoğu insanın amacı için bu konuyla ilgilendiğine inanıyorum. Bir noktada bu eklentiyi seçmeyi ve gerekli parçaları çıkarmayı, bulduklarımla buluşturmayı ve halka indirmek için yeniden paketlemeyi planlıyorum. Buradaki amacım, beklendiği gibi çalışan basit bir tıklama kurulum eklentisi oluşturmak.

Umarım bu herkese yardımcı olur!

İlk başta, bu sorunun WP sürüm 3.5'ten beri çözüldüğünü düşünüyorum; 19666 no.lu bilete bakınız . Ancak tinyMCE'nin bir kancası var, bize editörün içeriğini değiştirme şansı veriyor ve ön uçtaki çıktısını çözümlememelisiniz.

Küçük bir kaynak betiği. Şu anki WP versiyonuyla bunu test etmedim, müşteri için daha eski bir çözümdü.

Bu kaynağı eklenti ile ekleyin ve işaretlemeyi geliştirin. Html etiketinin işlev kontrolü <preve varsa, işaretleme ile değiştirilecektir.

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;
}

Ben OP benzer bir sorun vardı, ama benim için tutulması ile bir sorun ortaya çıkmıştır <h1>içinde <div>. Metin ve Görsel sekmeleri arasında geçiş yaparken saklamak istediğim şey buydu:

Sekmeyi değiştirdiğim her zaman <h1>kayboldu. Çok fazla araştırma yaptım ve Wordpress 4.7.3 için çok sayıda eski düzeltmenin olduğunu öğrendim. TinyMCE'in belediye başkanı sürüm 3'ten 4'e yükseltildi. V.3 için çözümler v.4 için işe yaramadı. Daha fazla googling ve TinyMCE sürüm 4 orijinal belgelerini okuduktan sonra özellikle durumum için bir çözüm buldum:

1. Advanced TinyMCE Configuration eklentisini kurun
2. TinyMCE valid_childrenayarını+div[h1],h1[div]
3. Ben additonnaly yapılandırılmış indent=true, forced_root_block=falseve schema=html5(I okuyunca forced_root_blockaçıklamasını bir olarak anlaşılmalıdır wpautopyerine)

Sonuç olarak bunu anlıyorum (ve sekmelerin değişmesine karşı dayanıklıdır)