สลับระหว่างแท็บ Visual และ HTML ได้อย่างอิสระ

ดังนั้นคำถามนี้ได้รับการยกหลายครั้งภายใต้ธงที่แตกต่างกัน แต่ฉันต้องการที่จะนำเสนอหัวข้อแบบครบวงจรสำหรับการแก้ปัญหาที่ดีที่สุดสำหรับปัญหานี้

ใน WordPress โดยค่าเริ่มต้นเมื่อสลับไปมาระหว่างตัวแก้ไข HTML และ Visual ใน TinyMCE แท็กบางอย่างจะถูกดึงออกจากเนื้อหาและการทำงานแปลก ๆ อื่น ๆ เกิดขึ้น วิธีแก้ไขปัญหาที่ทราบสองประการสำหรับการเขียนโค้ด HTML ที่มีประสิทธิภาพยิ่งขึ้นคือการใช้ฟังก์ชั่น wp_auto_p โดยใช้ตัวกรองและติดตั้ง TinyMCE Advanced และเปิดใช้งานตัวเลือก "หยุดลบแท็ก & แท็ก"

มันใช้งานได้ดีเท่านั้นโชคไม่ดี

ยกตัวอย่างเช่นตัวอย่างต่อไปนี้:

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

หากฉันพิมพ์รหัสนี้ลงในโปรแกรมแก้ไข HTML โดยที่ทั้งสองตัวเลือกข้างต้นเปิดใช้งานแล้วเมื่อฉันสลับระหว่างตัวแก้ไขสองตัวที่แตกต่างกันจะไม่มีอะไรเกิดขึ้นซึ่งคาดว่าจะเกิดขึ้น น่าเสียดายที่เมื่อบันทึกรหัสจะแปลงเป็นสิ่งนี้โดยอัตโนมัติ:

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

อย่างที่คุณเห็นเอนทิตีทั้งหมดภายในแท็กล่วงหน้าจะถูกแปลงกลับเป็นอักขระ HTML จริง จากนั้นถ้าฉันบันทึกโพสต์เดียวกันนี้อีกครั้งฉันจะได้รับสิ่งต่อไปนี้:

<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 จะฉีดแท็ก br ลงในโพสต์ จำเป็นต้องพูดเมื่อโพสต์นี้ได้รับการปรับปรุงสองสามครั้งเมื่อดูในส่วนหน้าจอแสดงผลจะอยู่ใกล้กับจอแสดงผลที่ต้องการ

วิธีเดียวที่ฉันดูเหมือนจะกำจัด "ฟังก์ชั่นการจัดรูปแบบ" ที่เพิ่มทั้งหมดนั้นคือการปิดการใช้งานโปรแกรมแก้ไขภาพผ่านโปรไฟล์ของฉัน

นี่เป็นทางออกที่ดีสำหรับฉันเนื่องจากฉันเป็นนักพัฒนาเว็บมืออาชีพ สำหรับลูกค้าของฉันโซลูชันนี้อยู่ไกลจากความสง่างาม ลูกค้าของฉันส่วนใหญ่จะใช้โปรแกรมแก้ไขภาพ ลูกค้าของฉันจำนวนมากไม่เข้าใจเทคโนโลยีมากนักและบางครั้งก็ต้องการให้ฉันแก้ไขโพสต์เมื่อเลย์เอาต์แตก สิ่งนี้ จำกัด ให้ฉันใช้โปรแกรมแก้ไขภาพเนื่องจากฉันไม่สามารถเปลี่ยนเป็นเครื่องมือแก้ไข HTML ได้โดยไม่ต้องกลัวว่าจะทำลายเค้าโครง

ส่วนใหญ่ (และฉันคิดว่ามีชุมชนขนาดใหญ่ที่สามารถได้รับประโยชน์จากคำตอบนี้) ฉันสามารถทำตามขั้นตอนใดบ้างเพื่อให้แน่ใจในสิ่งต่อไปนี้:

1. โพสต์สามารถแก้ไขได้จากตัวแก้ไข Visual หรือ HTML
2. เนื้อหาของโพสต์ไม่ได้รับการแก้ไข แต่อย่างใดเมื่อสลับระหว่างสองแท็บ
3. เมื่อบันทึกโพสต์จากเครื่องมือแก้ไข HTML จะไม่มีการเพิ่มเนื้อหาใด ๆ
4. เมื่อบันทึกโพสต์จากตัวแก้ไข HTML จะไม่มีการแปลงเอนทิตี
5. โบนัส: เมื่อบันทึกโพสต์จากตัวแก้ไข HTML โค้ดใด ๆ (HTML เช่น) ที่อยู่ในแท็กพรีและไม่ได้ถูกแปลงเป็นเอนทิตีจะถูกแปลงเป็นเอนทิตีโดยอัตโนมัติ

โดยพื้นฐานแล้วถ้าเราสามารถสร้างพฤติกรรมดังกล่าวใน TinyMCE ผ่านการใช้ปลั๊กอินของบุคคลที่สามเราสามารถระงับคำถามอื่น ๆ ทั้งหมดที่เกี่ยวข้องกับการจัดรูปแบบเท็จผ่านการใช้ TinyMCE ฉันรู้สึกว่าหลายคนจะได้ประโยชน์จากสิ่งนี้

ดูเหมือนว่ามีเหตุผลว่ามีฟังก์ชั่นบางอย่างที่เราคาดหวังจากเครื่องมือแก้ไขแบบ WYSIWIG และสิ่งนี้ขัดกับมัน ตามเหตุผลและเหตุผลทั้งหมด Wordpress 'ฟังก์ชั่นการจัดรูปแบบที่สร้างขึ้นค่อนข้างไร้ประโยชน์กับการตั้งค่าปัจจุบันของพวกเขา สำหรับฉันดูเหมือนว่าหากพวกเขาต้องการใช้ตัวเลือกการจัดรูปแบบเหล่านี้ทางออกที่ดีที่สุดของพวกเขาคือการเปิดใช้งานตัวแก้ไขอย่างใดอย่างหนึ่งหรืออย่างอื่นไม่ใช่ทั้งสองอย่าง

และโปรดอย่าตอบกระทู้นี้ด้วยวิธีแก้ไขและดาวน์โหลดสำหรับเครื่องมือแก้ไข WYSIWIG อื่น ๆ ที่ 'แก้ไขปัญหา' นี่เป็นปัญหาพื้นฐาน (แม้ว่าจะไม่ใช่ข้อผิดพลาดอย่างแท้จริง) กับคอร์ Wordpress ที่ต้องได้รับการแก้ไข

แก้ไข : เอาล่ะฉันทำงานนี้และฉันคิดว่าวิศวกรรมย้อนกลับจะเป็นวิธีที่ดีที่สุดในการแก้ปัญหานี้ ดังนั้นในตอนนี้ฉันได้ปิดการใช้งาน wpautop (ซึ่งสำหรับความชัดเจนก็คือฟังก์ชั่นที่เชื่อมต่อตัวกรอง "the_content" เพื่อเพิ่มแท็ก p และ br ก่อนที่ข้อความจะปรากฏขึ้นไม่ใช่เมื่อบันทึกข้อความฉันคิดว่ามีความสับสนอยู่บ้าง ฟังก์ชั่นนี้ทำงานอย่างไร wpautop ไม่รับผิดชอบต่อการเปลี่ยนแปลงที่คุณเห็นเกิดขึ้นเมื่อคุณสลับไปมาระหว่างแท็บแก้ไข

อย่างไรก็ตามฉันได้ปิดการใช้งาน wpautop ตามแนวทางปฏิบัติที่ดีเมื่อคุณใช้โปรแกรมแก้ไข HTML จากจุดนั้นฉันปิดการใช้งานโปรแกรมแก้ไขภาพเพื่อเริ่มต้นครั้งแรกกับข้อผิดพลาดเอนทิตี html ที่มีอยู่เมื่อบันทึกโพสต์ ขอบคุณความช่วยเหลือของ C. Bavota หนึ่งตัวฉันพบข้อมูลโค้ดเพื่อแปลงแท็กใด ๆ ในตัวแก้ไข HTML เป็นเอนทิตีเทียบเท่าของพวกเขาก่อนที่จะแสดงในส่วนหน้าของเว็บไซต์ (เครดิต: http://bavotasan.com/2012/convert -pre-tag-content-to-html-entity-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 ); 

สิ่งนี้จะช่วยลดปัญหาเกี่ยวกับ Wordpress ที่แปลงเอนทิตีทั้งหมดเป็นแท็กเมื่อบันทึกโดยหลีกเลี่ยง ตอนนี้คุณสามารถใช้เครื่องมือแก้ไข HTML และเขียนรหัสมาตรฐานระหว่างแท็ก "pre" โดยไม่ต้องทำการแปลงเอนทิตีด้วยตัวเอง สิ่งนี้จะดูแลปัญหาทั้งหมดของการแปลงเอนทิตีใน Wordpress และทำให้แน่ใจว่าทุกอย่างแสดงอย่างถูกต้องที่ส่วนหน้า ตอนนี้เราต้องคิดให้ดีว่าจะต้องแก้ไขอะไรบ้างเมื่อคลิกไปมาระหว่างแท็บต่างๆ ตอนนี้ดูเหมือนว่าเมื่อย้ายจาก HTML ไปยังแท็บภาพเนื้อหาของแท็บ HTML จะถูกตีความโดย javascript หรือบางสิ่งบางอย่างเพื่อพยายามอัปเดตสดๆว่าเนื้อหาควรมีลักษณะอย่างไร สิ่งนี้ทำให้แท็ก (ซึ่งแสดงในรูปแบบที่ไม่ใช่เอนทิตีในแท็บ HTML) ให้ดำเนินการแทนการแสดง จากนั้น เมื่อเปลี่ยนกลับเป็นแท็บ HTML จะปรากฏว่า TinyMCE ส่งข้อมูลปัจจุบันไปพร้อมกัน ซึ่งหมายความว่าเมื่อคุณเปลี่ยนกลับคุณจะสูญเสียโครงสร้าง HTML ของคุณ เราจำเป็นต้องหาวิธีที่จะบอก TinyMCE ในการแปลงทุกอย่างในแท็กล่วงหน้าให้เป็นเอนทิตีที่เทียบเท่ากันก่อนที่จะโหลดมันเข้าไปในหน้าต่าง เพื่อให้มันแสดงแทนการประมวลผล ข้อเสนอแนะ? เอนทิตีที่เทียบเท่ากันก่อนที่จะโหลดลงในหน้าต่าง (โดยพื้นฐานแล้วเป็นแบ็กเอนด์เวอร์ชันที่เราทำในส่วนหน้า แต่ด้วย tinymce และ javascript แทนที่จะเป็น php และ hooks) ดังนั้นมันจึงถูกแสดงแทนการประมวลผล ข้อเสนอแนะ? เอนทิตีที่เทียบเท่ากันก่อนที่จะโหลดลงในหน้าต่าง (โดยพื้นฐานแล้วเป็นแบ็กเอนด์เวอร์ชันที่เราทำในส่วนหน้า แต่ด้วย tinymce และ javascript แทนที่จะเป็น php และ hooks) ดังนั้นมันจึงถูกแสดงแทนการประมวลผล ข้อเสนอแนะ?

แก้ไข 2 :

หลังจากการวิจัยเพิ่มเติมการแปลงเอนทิตีในแท็กล่วงหน้าเมื่อแสดงจะทำงานได้ดีสำหรับเนื้อหาภายในแท็กล่วงหน้า แต่บอกว่าฉันมีโพสต์บล็อกที่มีบรรทัดเช่นนี้:

"ถัดไปเราต้องเพิ่มบรรทัดนี้ในไฟล์ HTML ของเรา: <p> สวัสดีโลก! </p>"

เมื่อมองไปที่บรรทัดนี้คุณสามารถบอกได้ว่าโค้ดควรจะแสดงบนไซต์และไม่ถูกวิเคราะห์คำอย่างไรก็ตามเมื่อบันทึกโพสต์เอนทิตีเหล่านี้จะถูกถอดรหัสในการโหลดการแก้ไขโพสต์ถัดไปและบันทึกทุกครั้งภายหลัง เป็นแท็ก html ดิบซึ่งทำให้แท็กแยกวิเคราะห์ที่ส่วนหน้า ทางออกเดียวที่ฉันสามารถนึกได้ว่าจะเขียนโค้ดที่คล้ายกันสำหรับแท็ก "code" ที่ฉันใช้สำหรับ pre แล้วก็ใส่ liners ตัวเล็กในแท็ก "code" และ chunks ขนาดใหญ่ใน แท็ก "ก่อน" ใครมีความคิดเห็นอื่น ๆ บ้าง

เอาล่ะฉันได้อัปเดตคำถามนี้ไปแล้วหนึ่งตันและมันเริ่มมีปัญหามากเกินไปดังนั้นฉันจึงคิดว่าฉันจะเขียนคำตอบนี้เป็นคำตอบแม้ว่ามันจะไม่เต็มก็ตาม

การคาดการณ์จากคำตอบของ @ bueltge ฉันกลับไปแล้วและพบว่าโพสต์ก่อนหน้าของเขามีปัญหา ในโพสต์นั้นมีรายการปลั๊กอินที่ฉันไม่เคยเห็นมาก่อน: "มาร์กอัป HTML Editor ที่เก็บรักษาไว้" ปลั๊กอินนี้ยังไม่ได้รับการปรับปรุงในขณะที่ แต่ฉันเพิ่งทดสอบกับ WP 3.6.1 และมันทำงานได้อย่างสมบูรณ์ ปลั๊กอินนี้จะดูแล wpautop โดยอัตโนมัติจัดให้มีรูปแบบรวมสำหรับการแทรกแท็ก br และ p ภายในโปรแกรมแก้ไขภาพและรักษามาร์กอัปของคุณเมื่อสลับระหว่างแท็บ

เพื่อจุดประสงค์ของฉันฉันได้ขยายปลั๊กอินนี้ด้วยการทำงานของตัวเอง: การแปลงแท็ก html ใด ๆ โดยอัตโนมัติภายในแท็ก "<code>" เป็นเอนทิตีที่เกี่ยวข้อง ซึ่งหมายความว่าคุณสามารถเขียนรหัส HTML มาตรฐานในแท็กรหัสภายในแท็บข้อความแล้วบันทึกและสิ่งทั้งหมดในแท็กล่วงหน้าจะถูกแปลงเป็นเอนทิตีเพื่อการแสดงที่เหมาะสมที่ส่วนหน้าของไซต์และโปรแกรมแก้ไขภาพ มันไม่ใช่ทางออกที่หรูหราที่สุดที่ฉันเคยพบ แต่ดูเหมือนว่าจะใช้งานได้ เพิ่มบรรทัดนี้ในฟังก์ชั่นของคุณ php หลังจากเปิดใช้งานปลั๊กอิน:

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

ตอนนี้เพียงพิมพ์ HTML ที่ถูกต้องในระหว่างแท็กรหัสและเมื่อคุณบันทึกเมื่อตัวแก้ไขปรากฏขึ้นพวกเขาทั้งหมดจะถูกแปลงเป็นเอนทิตี วิธีนี้ช่วยให้คุณสามารถเขียนรหัสได้เร็วขึ้น ตอนนี้สิ่งเดียวที่ยังคงเป็นปัญหาคือถ้าคุณมีฟิลด์ "pre" ที่มีแท็กรหัสที่ซ้อนกันและ HTML ในนั้นและคุณไปที่แท็บภาพและพยายามที่จะแทรกบรรทัดใหม่ลงในรหัสแท็ก br รับการฉีดเข้าไปในแท็กรหัสของคุณใน HTML จะต้องมีตัวเลือกในการปิดการใช้งานนี้ใน TinyMCE ไม่ว่าตราบใดที่คุณแก้ไขฟิลด์ล่วงหน้าจากแท็บข้อความคุณสามารถสลับไปมาระหว่างแท็บเพิ่มเนื้อหาใด ๆ ในแท็บใดก็ได้บันทึกจากแท็บใดก็ได้โดยไม่ต้องกังวลเกี่ยวกับการจัดรูปแบบที่ยุ่งเหยิง!

สิ่งนี้แก้ได้ทั้งหมด 5 ข้อจากคำถามเริ่มต้นของฉัน ประเด็นที่ 2 ยังคงเป็นขุยเล็กน้อย แต่ฉันเชื่อว่าเพื่อจุดประสงค์ของประชาชนส่วนใหญ่สิ่งนี้จะดูแลปัญหา ฉันวางแผนที่จะกลั่นกรองผ่านปลั๊กอินนี้ในบางจุดและแยกส่วนที่จำเป็นรวมเข้ากับการค้นหาของฉันและบรรจุใหม่สำหรับการดาวน์โหลดสาธารณะ เป้าหมายของฉันที่นี่คือการสร้างปลั๊กอินการติดตั้งเพียงคลิกเดียวที่สามารถเขียนได้อย่างที่คาดไว้

หวังว่านี่จะช่วยทุกคน!

ตอนแรกฉันคิดว่าปัญหานี้แก้ไขได้ตั้งแต่ WP เวอร์ชัน 3.5; ดูตั๋ว 19,666 ใน Trac แต่ TinyMCE มีเบ็ดอยู่ที่นั่นทำให้เรามีโอกาสที่จะเปลี่ยนเนื้อหาภายในเอดิเตอร์และคุณจะต้องไม่แยกวิเคราะห์เอาต์พุตบนส่วนหน้า

สคริปต์ต้นฉบับขนาดเล็ก ฉันไม่ได้ทดสอบสิ่งนี้ด้วยรุ่น WP ปัจจุบันเป็นโซลูชันที่เก่ากว่าสำหรับลูกค้า

เพิ่มแหล่งข้อมูลนี้ผ่านปลั๊กอินและปรับปรุงมาร์กอัป ฟังก์ชั่นการตรวจสอบ html-tag <preและหากมีอยู่แล้วจะถูกแทนที่ด้วยมาร์กอัป

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

ผมมีปัญหาที่คล้ายกับ OP แต่สำหรับผมมีปัญหากับการรักษาใน<h1> <div>นี่คือสิ่งที่ฉันต้องการเก็บไว้ในขณะที่สลับระหว่างแท็บข้อความและ Visual:

ทุกครั้งที่ฉันเปลี่ยนแท็บ<h1>หายไป ฉันทำการค้นหาจำนวนมากและสำหรับ Wordpress 4.7.3 ฉันพบว่ามีการแก้ไขที่ล้าสมัยมากมาย มีการอัพเกรดนายกเทศมนตรีของ TinyMCE จากเวอร์ชั่น 3 เป็น 4 โซลูชั่นสำหรับ v.3 ไม่ได้ผลสำหรับ v.4 หลังจาก googling และอ่านเอกสารต้นฉบับของ TinyMCE เวอร์ชัน 4 มากขึ้นฉันได้พบกับโซลูชันสำหรับกรณีของฉันโดยเฉพาะ:

1. ติดตั้งปลั๊กอินการกำหนดค่าขั้นสูง TinyMCE ขั้นสูง
2. ตั้งค่า TinyMCE valid_childrenเป็น+div[h1],h1[div]
3. ฉัน additonnaly กำหนดค่าindent=true, forced_root_block=falseและschema=html5(เมื่อฉันอ่านforced_root_blockคำอธิบายที่ผมเข้าใจว่ามันเป็นwpautopแทน)

เป็นผลให้ฉันได้รับนี้ (และมันก็ทนต่อการเปลี่ยนแท็บ)