따라서이 질문은 다른 플래그로 여러 번 제기되었지만이 문제에 대한 궁극적 인 솔루션을위한 통합 스레드를 제시하고 싶습니다.

WordPress에서는 기본적으로 TinyMCE의 HTML 편집기와 Visual 편집기간에 전환 할 때 특정 태그가 컨텐츠에서 제거되고 기타 이상한 기능이 발생합니다. 보다 효율적인 HTML 코드를 작성하는 알려진 두 가지 해결 방법은 필터를 사용하여 wp_auto_p 함수를 제거하고 TinyMCE Advanced를 설치하고 “p & br 태그 제거 중지”옵션을 활성화하는 것입니다.

불행히도 이것은 잘 작동합니다.

예를 들어 다음 예제를 보자.

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

보시다시피 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를 비활성화했습니다 (명확성을 위해 텍스트를 저장할 때가 아니라 텍스트가 표시되기 전에 p 및 br 태그를 추가하기 위해 “the_content”필터에 연결하는 기능입니다) wpautop는 편집기 탭 사이를 전환 할 때 발생하는 변경 사항에 대해 책임을지지 않습니다.

어쨌든 HTML 편집기를 사용할 때 wpautop를 비활성화했습니다. 그 시점에서 게시물을 저장할 때 나타나는 html 엔티티 오류로 시작하도록 비주얼 편집기를 비활성화했습니다. C. Bavota의 도움 덕분에 HTML 편집기의 모든 태그를 사이트의 프런트 엔드에 표시하기 전에 해당 엔티티로 변환하는 스 니펫을 발견했습니다 (신용 : http://bavotasan.com/2012/convert -pre-tag-contents-to-html-entities-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에게 pre 태그의 모든 것을 창으로 로딩하기 전에 동등한 엔티티로 변환하도록 (필수적으로 프론트 엔드에서 수행 한 것의 백엔드 버전이지만 PHP와 후크 대신 tinymce와 javascript로), 처리되는 대신 표시되도록합니다. 제안? 창에로드하기 전에 동등한 엔티티 (필수적으로 프론트 엔드에서 수행했지만 PHP 및 후크 대신 tinymce 및 javascript로 수행 한 작업의 백엔드 버전)로 처리되지 않고 표시됩니다. 제안? 창에로드하기 전에 동등한 엔티티 (필수적으로 프론트 엔드에서 수행했지만 PHP 및 후크 대신 tinymce 및 javascript로 수행 한 작업의 백엔드 버전)로 처리되지 않고 표시됩니다. 제안?

편집 2 :

더 많은 연구를 한 후 사전 태그의 엔티티를 표시 할 때 사전 태그의 컨텐츠를 변환하면 사전 태그 내의 내용에 적합하지만 다음과 같은 행이있는 블로그 게시물이 있다고 가정합니다.

“다음으로이 줄을 HTML 파일에 추가해야합니다 : <p> Hello, World! </ p>”

이 줄을 보면 코드가 사이트에 표시되고 구문 분석되지 않아야 함을 알 수 있지만 게시물이 저장되면 다음 엔티티 편집로드 에서이 엔티티가 디코딩되고 모든 후속 저장시 저장됩니다 원시 html 태그로서 프론트 엔드에서 구문 분석됩니다. 내가 지금까지 생각할 수있는 유일한 해결책은 pre에 사용하는 것과 같은 “code”태그에 대해 유사한 코드를 작성하고 “code”태그에 작은 하나의 라이너를 싸서 큰 코드를 작성하는 것입니다. “pre”태그. 다른 아이디어가 있습니까?

답변

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

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