TinyMCE 편집기가 아름다운 HTML을 깨고 있습니다

이것은 Wordpress와 TinyMCE가 HTML5에서 허용되는대로 블록 수준 요소를 래핑하는 <a> 태그를 허용하도록 만드는 방법 과 거의 똑같습니다. 및 HTML5, WordPress 및 Tiny MCE 문제-div 주위에 앵커 태그 줄 바꿈으로 인해 펑키 한 출력이 발생합니다.

내 문제는 제안 된 솔루션 ( tiny_mce_before_init필터)이 내 문제를 해결하지 못하는 것입니다. 다음과 같은 HTML이 있습니다.

<a href="#">
    <img src="path/to/file.jpg" />
    <p>Some amazing descriptive text</p>
</a>

HTML5에서 완벽하게 합법적입니다. 그러나 WP 편집기는이를 좋아하지 않으며 다음과 같이 변환합니다.

<a href="#">
    <img src="path/to/file.jpg" />
</a>
<p>Some amazing descriptive text</p>

물론 이것은 내 레이아웃을 깨뜨립니다. 아무도 내가이 행동을 막을 수있는 방법을 알고 있습니까? 편집기 의 Visual 구성 요소를 포기하고 일반 텍스트를 사용할 수 없습니다 . 어떤 제안이라도 환영합니다.

분명히하기 위해, 아래 코드를 사용하면 ( here 제안 ) <p>태그가 앵커 안에 남아있을 수 있지만  시각적 모드와 텍스트 모드를 전환 할 때마다 증가 하는 엔티티 와 함께 추가 공간이 많이 추가 됩니다.

add_filter('tiny_mce_before_init', 'modify_valid_children');

function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

유효한 하위 항목으로 구성한 내용에 관계없이 WordPress는 p 태그와 줄 바꿈을 매우 고유 한 방식으로 처리합니다. 아직 작성하지 않은 경우 텍스트 편집기에서 시각적 편집기로 전환 한 후 다시 <p>태그를 제거 할 때 프런트 엔드에서 발생하는 것과 유사한 것을 알 수 있습니다. 이를 방지하는 방법은 <p>태그에 사용자 정의 클래스를 제공하는 것 입니다.

<p class="text">This p tag won't get removed"</p>.

반면 ↑ 이 ↑ 제거하기에서 p 태그를 유지할 것은, 아직까지 청소 만 가져옵니다 프론트 엔드에 마크 업으로 문제가 해결되지 않습니다. wpautop를 비활성화 할 수 있습니다. 그렇게하고 유효한 어린이에 p를 포함 시키면 문제 가 해결 됩니다.

옵션 1 : Autop 비활성화 및 유효한 자식 설정

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

두 번째로 HTML 편집기에서 TinyMCE로 다시 전환하면 HTML 이 손상 된다는 경고가 표시됩니다. 해결 방법은 아래 옵션 2에서와 같이 특정 게시물 유형에 대해 TinyMCE를 모두 비활성화 하는 것입니다.

옵션 2 : 자동 P, TinyMCE 비활성화 및 유효한 자식 설정

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}
add_filter('user_can_richedit', 'disable_wyswyg_to_preserve_my_markup');
function disable_wyswyg_to_preserve_my_markup( $default ){
  if( get_post_type() === 'post') return false;
  return $default;
}

↑ 그러나 대부분의 사람들 에게이 ↑ 는 옵션이 아닙니다.

다른 옵션은 무엇입니까? 내가 알아 낸 한 가지 해결 방법 은 클래스 와 함께 span 태그 를 사용하고 HTML 태그 사이에 공백이 없는지 확인하는 것 입니다 . 이렇게하면 위의 옵션 중 하나를 사용하여 TinyMCE를 모두 비활성화하지 않아도됩니다. 범위를 올바르게 표시하려면 CSS를 스타일 시트에 추가해야합니다.

옵션 3 : 옵션 1 + 스타일 범위 태그

HTML

<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Some amazing descriptive text</span></a>

스타일 시트의 CSS

.noautop {
    display: block;
}

옵션 4 : 내장 미디어 업 로더 단축 코드 사용

처음에는 이것을 잊었지만 [caption] 단축 코드는 다음과 같습니다.

[caption id="attachment_167" align="alignnone" width="169"]
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    awesome caption
[/caption]

결과는 다음과 같습니다.

<figure id="attachment_167" style="width: 169px" class="wp-caption alignnone">
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    <figcaption class="wp-caption-text">Some amazing descriptive text</figcaption>
</figure>

그림 태그를 원하지 않으면 다음을 수행 할 수있는 사용자 정의 컨텐츠 단축 코드 와 같은 플러그인을 사용할 수 있습니다.

[raw] <p>this content will not get filtered by wordpress</p> [/raw]

편집자가 원하는 방식으로 작동하지 않는 이유는 무엇입니까?

나는 지난 몇 년 동안 이것이 잘 작동하도록 많은 시간을 보냈습니다. 때로는 완벽하게 작동하는 솔루션을 제안하지만 WordPress는 모든 것을 다시 엉망으로 만드는 업데이트를 푸시합니다. 내가 어떻게해야 완벽하게 작동하는지 알게 된 유일한 솔루션은 내가 가진 최고의 답변으로 이끌어줍니다.

옵션 5 : 보존 된 HTML 편집기 마크 업 플러스

따라서 두통을 피하고 이걸로 가십시오. 기본적으로 Preserved HTML Editor Markup Plus 는 새 페이지에만 영향을줍니다. 이미 작성된 페이지를 변경하려면 www.example.com/wp-admin/options-writing.php 로 이동 하여 플러그인 설정을 편집해야합니다. 기본 줄 바꿈 동작을 변경할 수도 있습니다.

참고 :이를 사용하기로 결정한 경우 새 WordPress 업데이트가 시작될 때 지원 스레드를 확인하십시오. 때때로 변경 사항이 엉망이되어 플러그인이 최신 버전에서 작동하는지 확인하는 것이 가장 좋습니다.

추가 크레딧 : 문제 디버깅 / 기타 TinyMCE 옵션 편집

필터와 마찬가지로 TinyMCE 구성을 수동으로 검사하고 쉽게 편집 하려면 고급 TinyMCE 구성을 설치할 수 있습니다 . 구성된 TinyMCE 옵션을 모두 보고 간단한 인터페이스에서 편집 할 수 있습니다. 필터와 마찬가지로 새 옵션을 추가 할 수도 있습니다. 이해하기가 훨씬 쉽습니다.

예를 들어, 나는 그것과 Preserved HTML Editor Markup Plus를 가지고 있습니다. 아래 스크린 샷은 Advanced TinyMCE Config 관리자 페이지입니다. 스크린 샷은 실제로 존재하는 것의 90 %를 잘라내지만, 편집 할 수있는 유효한 자식과 보존 된 HTML 편집기 마크 업 플러스를 추가 한 자식을 보여줍니다 .

이것은 에디터를 완전히 커스터마이즈 할뿐만 아니라 진행 상황을 볼 수있는 매우 유용한 방법입니다. 그때 문제의 원인을 파악할 수도 있습니다. Preserved HTML Editor Markup이 활성화되어있는 동안 매개 변수를 직접 살펴본 후 사용자 지정 필터에 추가 할 수있는 몇 가지 추가 옵션을 보았습니다.

function fix_tiny_mce_before_init( $in ) {

    // You can actually debug this without actually needing Advanced Tinymce Config enabled:
    // print_r( $in );
    // exit();

  $in['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    $in[ 'force_p_newlines' ] = FALSE;
    $in[ 'remove_linebreaks' ] = FALSE;
    $in[ 'force_br_newlines' ] = FALSE;
    $in[ 'remove_trailing_nbsp' ] = FALSE;
    $in[ 'apply_source_formatting' ] = FALSE;
    $in[ 'convert_newlines_to_brs' ] = FALSE;
    $in[ 'verify_html' ] = FALSE;
    $in[ 'remove_redundant_brs' ] = FALSE;
    $in[ 'validate_children' ] = FALSE;
    $in[ 'forced_root_block' ]= FALSE;

    return $in;
}
add_filter( 'tiny_mce_before_init', 'fix_tiny_mce_before_init' );

불행히도이 방법은 효과가 없었습니다. 게시물을 업데이트하거나 편집기 사이를 전환 할 때 발생하는 정규식 또는 JavaScript가있을 수 있습니다. Preserved HTML Editor 소스 코드를 살펴보면 관리 측에서 JavaScript가 작동한다는 것을 알 수 있으므로 마지막 기능은 테마 에이 기능을 추가하려는 경우 플러그인의 작동 방식 을 확인 하는 것입니다.

어쨌든, 내 대답에서 이것을 멀리 얻은 사람에게는 미안합니다. 방금 WordPress 편집기를 다루는 내 경험을 공유한다고 생각했기 때문에 다른 사람들은 내가했던 것처럼 이것을 알아 내려고 노력하는 데 몇 시간을 소비하지 않아도됩니다!