Trình chỉnh sửa TinyMCE đang phá vỡ HTML tuyệt đẹp của tôi

Đây gần như là một bản sao chính xác của: Làm cách nào để Wordpress và TinyMCE chấp nhận <a> thẻ bao bọc các thành phần cấp khối như được phép trong HTML5? và vấn đề HTML5, WordPress và Tiny MCE - gói thẻ neo quanh div dẫn đến kết quả đầu ra thú vị

Vấn đề của tôi là giải pháp được đề xuất ( tiny_mce_before_initbộ lọc) dường như không giải quyết được vấn đề của tôi. Tôi có HTML trông như thế này:

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

Điều này là hoàn toàn hợp pháp trong HTML5. Tuy nhiên, trình soạn thảo WP không thích nó và biến nó thành:

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

Điều này, tất nhiên, phá vỡ bố cục của tôi. Có ai biết một cách tôi có thể ngăn chặn hành vi này? Tôi không thể từ bỏ thành phần Visual của trình chỉnh sửa và giữ nguyên văn bản. Mọi góp ý đều được chào đón.

Để rõ ràng, khi tôi sử dụng mã bên dưới (được đề xuất ở đây ), các <p>thẻ được phép ở lại trong các neo nhưng rất nhiều không gian bổ sung được thêm vào cùng với một  thực thể nhân lên mỗi khi bạn chuyển giữa chế độ Visual và Text.

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

Bất kể những gì bạn đã cấu hình là con hợp lệ, WordPress xử lý các thẻ p cũng như ngắt dòng theo một cách rất độc đáo. Cuối cùng, bạn có thể nhận thấy rằng, khi bạn chưa, khi chuyển từ trình soạn thảo văn bản sang trình soạn thảo trực quan và quay lại rằng các <p>thẻ của bạn bị tước, tương tự như những gì xảy ra trên frontend. Một cách để ngăn chặn điều này xảy ra là bằng cách cung cấp cho các <p>thẻ một lớp tùy chỉnh.

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

Trong khi ↑ này ↑ sẽ giữ thẻ p của bạn khỏi bị tước, nó sẽ không giải quyết được vấn đề của bạn là đánh dấu của bạn trên lối vào vẫn được mucked lên. Bạn có thể DISABLE wpautop. Nếu bạn làm điều đó VÀ có p trong những đứa trẻ hợp lệ, điều này S F CỐ ĐỊNH VẤN ĐỀ CỦA BẠN .

TÙY CHỌN 1: Vô hiệu hóa Tự động và Đặt con hợp lệ

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

Tôi nên cảnh báo bạn mặc dù lần thứ hai bạn chuyển từ trình chỉnh sửa HTML trở lại TinyMCE, HTML của bạn sẽ bị hủy. Một cách giải quyết là vô hiệu hóa TinyMCE hoàn toàn cho các loại bài đăng nhất định như trong tùy chọn 2 bên dưới.

TÙY CHỌN 2: Vô hiệu hóa Auto P, TinyMCE và Đặt con hợp lệ

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

Đối với hầu hết mọi người dù ↑ này ↑ không phải là một lựa chọn.

Vì vậy, những lựa chọn khác là gì? Một cách giải quyết khác mà tôi nhận thấy là sử dụng thẻ span với một lớp và đảm bảo không có khoảng trắng giữa các thẻ HTML của bạn . Nếu bạn làm điều này, bạn có thể sử dụng tùy chọn một ở trên và tránh phải vô hiệu hóa tất cả TinyMCE cùng nhau. Chỉ cần nhớ rằng bạn cũng sẽ phải thêm một số CSS vào biểu định kiểu của mình để hiển thị nhịp chính xác.

TÙY CHỌN 3: Tùy chọn 1 + Thẻ khoảng cách

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 trong Biểu định kiểu

.noautop {
    display: block;
}

Tùy chọn 4: Sử dụng mã ngắn của trình tải lên phương tiện tích hợp

Ban đầu tôi đã quên cái này, nhưng shortcode [chú thích] sẽ trông như thế này:

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

Đầu ra sẽ như thế này:

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

Nếu bạn không muốn thẻ hình, bạn có thể sử dụng một plugin như shortcode nội dung tùy chỉnh cho phép bạn làm điều này:

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

Tại sao trình soạn thảo không thể hoạt động như tôi muốn?

Tôi đã dành vô số thời gian để cố gắng làm cho nó hoạt động tốt trong vài năm qua. Thỉnh thoảng tôi sẽ đưa ra một giải pháp hoạt động hoàn hảo, nhưng sau đó WordPress sẽ đẩy một bản cập nhật làm rối tung mọi thứ lại. Giải pháp duy nhất tôi từng thấy là hoàn toàn hoạt động như thế nào, đưa tôi đến câu trả lời tốt nhất mà tôi có.

Tùy chọn 5: Trình soạn thảo HTML được bảo quản Markup Plus

Vì vậy, hãy tự cứu mình khỏi đau đầu và chỉ cần đi với điều này. Theo mặc định, Markup Plus Editor được bảo tồn chỉ ảnh hưởng đến các trang mới. Nếu bạn muốn thay đổi các trang đã được tạo, bạn phải truy cập www.example.com/wp-admin/options-wr.php và chỉnh sửa cài đặt plugin. Bạn cũng sẽ có thể thay đổi hành vi dòng mới mặc định.

Lưu ý: Nếu bạn quyết định sử dụng điều này, hãy đảm bảo bạn kiểm tra chuỗi hỗ trợ khi bản cập nhật WordPress mới được tung ra. Đôi khi, một thay đổi sẽ làm mọi thứ rối tung lên, vì vậy tốt nhất là đảm bảo plugin hoạt động trên các phiên bản mới hơn.

Tín dụng bổ sung: Gỡ lỗi vấn đề của bạn / Chỉnh sửa các tùy chọn TinyMCE khác

Nếu bạn muốn kiểm tra và dễ dàng chỉnh sửa cấu hình TinyMCE của mình theo cách thủ công, giống như bạn làm với các bộ lọc, bạn có thể cài đặt cấu hình TinyMCE nâng cao . Nó cho phép bạn xem TẤT CẢ các tùy chọn TinyMCE được cấu hình và chỉnh sửa chúng từ một giao diện đơn giản. Bạn cũng có thể thêm các tùy chọn mới giống như bạn làm với các bộ lọc. Nó làm cho mọi thứ dễ dàng hơn nhiều để hiểu.

Ví dụ: tôi có cả hai và Trình soạn thảo HTML được bảo tồn Markup Plus. Ảnh chụp màn hình bên dưới là của trang quản trị Cấu hình TinyMCE Nâng cao. Mặc dù ảnh chụp màn hình đang cắt giảm 90% những gì thực sự ở đó, nhưng bạn có thể thấy nó cho thấy những đứa trẻ hợp lệ có sẵn để chỉnh sửa và những cái nào được bảo tồn bởi Trình soạn thảo HTML Markup Plus .

Đây là một cách cực kỳ hữu ích không chỉ tùy chỉnh hoàn toàn trình soạn thảo của bạn mà còn xem những gì đang diễn ra. Bạn thậm chí có thể tìm ra những gì đã gây ra vấn đề của bạn sau đó. Sau khi tự mình xem qua các tham số trong khi bật Trình chỉnh sửa HTML được bảo tồn, tôi thấy một số tùy chọn bổ sung có thể được thêm vào bộ lọc tùy chỉnh.

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

Thật không may, phương pháp này không hiệu quả. Có thể có một số regex hoặc JavaScript đang xảy ra khi cập nhật bài đăng và / hoặc chuyển đổi giữa các biên tập viên. Nếu bạn xem mã nguồn Trình soạn thảo HTML được bảo tồn, bạn có thể thấy rằng một số JavaScript hoạt động ở phía quản trị viên, vì vậy lời khuyên cuối cùng của tôi là kiểm tra cách plugin hoạt động nếu bạn muốn thêm chức năng này trong chủ đề của mình.

Dù sao, xin lỗi cho bất cứ ai đã nhận được điều này trong câu trả lời của tôi. Chỉ cần nghĩ rằng tôi sẽ chia sẻ kinh nghiệm của riêng mình khi làm việc với trình soạn thảo WordPress, vì vậy những người khác hy vọng sẽ không phải mất hàng giờ để cố gắng tìm ra điều này giống như tôi đã làm!