web-dev-qa-db-ja.com

TinyMCEエディタが私の美しいHTMLを壊しています

WordpressとTinyMCEがHTML5で許可されているようにブロックレベル要素をラッピングする<a>タグを受け入れる方法？ and 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 コンポーネントをあきらめてプレーンテキストに固執することはできません。任意の提案は大歓迎です。

明確にするために、以下のコード（ ここで推奨 ）を使用すると、<p>タグはアンカーの内側に残すことができますが、&nbsp;エンティティと共に追加のスペースが追加されます。ビジュアルモードとテキストモードを切り替えます。

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;
}
tinymcevisual-editorhtml5
9
Dominic P

有効な子として設定したものに関係なく、WordPressはpタグと改行を非常にユニークな方法で処理します。まだお持ちでない場合は、テキストエディターからビジュアルエディターに切り替えたときに、フロントエンドで発生するのと同様に、<p>タグが削除されることに気付くでしょう。これを防ぐには、<p>タグにカスタムクラスを指定します。

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

↑ this ↑は、pタグが削除されないようにしますが、フロントエンドのマークアップがまだマックアップされているため、問題は修正されません。 DISABLE 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：Auto 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;
}

ほとんどの人にとって↑ this ↑はオプションではありません。

それでは、他にどんなオプションがありますか？私が動作していることに気づいた1つの回避策は、spanタグをclassで使用し、そこにあることを確認することですis not space HTMLタグ間。これを行う場合は、上記のオプション1を使用して、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：組み込みのメディアアップローダーショートコードを使用する

shortcode media uploader

最初はこれを忘れていましたが、 [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>

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の設定を手動で簡単にedit編集したい場合は、 advanced TinyMCE config をインストールできます。設定されたTinyMCEオプションのALLを表示し、シンプルなインターフェースから編集できます。フィルターと同じように新しいオプションを追加することもできます。物事を非常に理解しやすくします。

たとえば、私はそれとPreserved HTML Editor Markup Plusの両方を持っています。以下のスクリーンショットは、Advanced TinyMCE Con​​fig管理ページのものです。スクリーンショットは実際に存在するものの90％を切り取っていますが、編集可能な有効な子と、どの子Preserved HTML Editor Markup Plusが追加されているかを見ることができます。

TinyMCE editor

これは、エディターを完全にカスタマイズするだけでなく、何が起こっているのかを確認する非常に便利な方法です。その場合、問題の原因が何であるかを把握できる場合もあります。 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エディターを扱った私自身の経験を共有したいと思ったので、他の人が私と同じようにこれを理解しようとして何時間も費やす必要はないでしょう！

17
Bryan Willis