web-dev-qa-db-ja.com

ビジュアルタブとHTMLタブを自由に切り替える

そのため、この問題はさまざまなフラグの下で何度も提起されていますが、この問題に対する究極の解決策のための統一されたスレッドを提示したいと思います。

WordPressでは、デフォルトで、TinyMCEでHTMLエディタとビジュアルエディタを切り替えると、特定のタグがコンテンツから削除され、その他の奇妙な機能が発生します。より効率的なHTMLコードを書くための2つの既知の回避策は、フィルタを使用して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エディタに入力しても、2つの異なるエディタを切り替えても何も起こりません。残念ながら、保存すると、コードは自動的に次のように変換されます。

<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タグを挿入します。言うまでもなく、この投稿が数回更新されたとき、フロントエンドでそれを見ているとき、ディスプレイは意図されたディスプレイの近くにはどこにもありません。

私が追加されたすべての「フォーマット機能」を取り除くように思われた唯一の方法は私のプロファイルを通してビジュアルエディタを無効にすることでした。

私はプロのWeb開発者であることを考えると、これは私にとってすばらしい解決策です。私の顧客にとって、この解決策は洗練されたものではありません。私のクライアントは、ほとんどの場合、ビジュアルエディタを使用します。私のクライアントの多くはあまり技術に精通していないので、レイアウトが壊れたときに投稿を修正する必要がある場合があります。私はレイアウトを壊すことを恐れずにHTMLエディタに変更することができないので、これは私がビジュアルエディタの使用に制限します。

主に、（そしてこの答えから利益を得ることができる大きなコミュニティがあると思います）、以下を確実にするためにどんな明白なステップを踏むことができるか：

  1. 投稿はビジュアルエディタまたはHTMLエディタから編集できます。
  2. 2つのタブを切り替えても、投稿の内容は変更されません。
  3. HTMLエディタから投稿を保存するときに、追加のコンテンツは追加されません。
  4. HTMLエディタから投稿を保存するとき、エンティティは変換されません。
  5. ボーナス：HTMLエディタから投稿を保存するとき、preタグの内側にラップされていてまだエンティティに変換されていないコード（たとえばHTML）は自動的にエンティティに変換されます。

本質的に、もし私たちがサードパーティのプラグインを使ってTinyMCEで前述の振る舞いを作り出すことができれば、私たちはTinyMCEを使うことによる誤ったフォーマットに関する他のすべての質問を鎮めることができます。私は多くの人がこれから恩恵を受けることができると思います。

WYSIWIGエディタに期待される特定の機能があることは論理的に思えますが、これはそれに反します。すべての論理と理由によると、Wordpressに組み込まれている書式設定関数は、現在の設定ではほとんど役に立ちません。彼らがこれらのフォーマットオプションを使用したい場合、彼らの最善の策は両方ではなく、どちらか一方のエディタを有効にすることだろうと私には思えます。

してください：問題を「修正」する他のWYSIWIGエディタのための回避策とダウンロードでこのスレッドに答えないでください。これはWordpressコアの根本的な問題です（ただし、本当にバグではありません）。修正が必要です。

_ edit _ ：さて、私はこれに取り組んできました、そして私はリバースエンジニアリングがこの問題を解決する最良の方法になると考えています。そのため、今のところ、wpautopを無効にしました（わかりやすくするために、テキストを保存するときではなく、pタグとbrタグを追加するための "the_content"フィルタテキストが表示される前} _を追加します。 wpautopは、エディタのタブを切り替えたときに起こる変更に対して責任を負いませんが、まったく違います。

とにかく、私はあなたがHTMLエディタを使うとき良い習慣であるように、wpautopを無効にしました。その時点から、私はビジュアルエディタを無効にして、投稿を保存するときに存在するhtmlエンティティエラーで最初に起動するようにしました。 C. Bavotaの助けを借りて、サイトのフロントエンドに表示する前にHTMLエディタのタグを同等のエンティティに変換するスニペットを見つけました（credit： http://bavotasan.com/2012/pre-tag-contents-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にpreタグのすべてを同等のエンティティに変換するように指示する方法を考え出す必要があります（基本的にフロントエンドで行ったもののphpとhookの代わりにtinymceとjavascriptを使ったバックエンドバージョン）。処理されずに表示されます。提案？

編集2 ：

もう少し調べてみると、プレタグ内のエンティティを表示時に変換すると、プレタグ内のコンテンツに対してはうまく機能しますが、次のような行を含むブログ投稿があるとします。

「次に、この行をHTMLファイルに追加する必要があります。<p>こんにちは、世界！</p>」

この行を見ると、コードはサイトに表示され、解析されていないことがわかります。ただし、投稿が保存されると、これらのエンティティは次回の投稿編集ロード時にデコードされ、保存されるたびに保存されます。生のhtmlタグとして。フロントエンドで解析されます。私がこれまで考えてきた唯一の解決策は、私がpreのために使っているのと同じように "code"タグに似たコードを書き、それから "code"タグに小さな一つのライナーをラップすることです。 "pre"タグ他に何か考えがありますか？

tinymceformattingwp-autopline-breaks
20
Thought Space Designs

そうですね、私はすでにこの質問を1トン更新しました。それは過負荷になり始めています、それで私はそれが完全なものではないけれども私が答えとしてこれを書くことを考えました。

@ bueltgeの答えから推測して、私は実際に戻って問題の彼の以前の投稿を見つけました。その記事の中に、私が今まで見たことのないプラグインがリストされていました： "Preserved HTML Editor Markup"。このプラグインはしばらく更新されていませんが、私はWP 3.6.1でテストしたところ、完全に機能しています。このプラグインは自動的にwpautopの面倒を見て、ビジュアルエディタ内にbrとpタグを挿入するための統一されたフォーマットを提供します、そしてタブを切り替えるときあなたのマークアップを保存します。

私自身の目的のために、私は自分自身の機能でこのプラグインを拡張しました： "<code>"タグ内のhtmlタグの保存時のそれぞれのエンティティへの自動変換。つまり、テキストタブ内のコードタグに標準のHTMLコードを書いて保存すると、サイトのフロントエンドやビジュアルエディタに適切に表示されるように、プレタグのすべてのものがエンティティに変換されます。それは私がまだ見つけた最も洗練された解決策ではありません、しかしそれはうまくいくようです。プラグインを有効にした後、この行をあなたのfunctions.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を入力するだけで、保存時にエディタがポップアップしたときに、それらがすべてエンティティに変換されます。これにより、コードを早く書くことができます。まだ問題になるのは、ネストされたコードタグとHTMLを含む "pre"フィールドがあり、ビジュアルタブに移動してコードに新しい行を挿入しようとした場合です。 HTMLのコードタグに挿入されます。 TinyMCEではこれを無効にするオプションが必要です。とにかく、あなたがテキストタブからあなたの前のフィールドを編集する限り、あなたは自由にタブを切り替えて、任意のタブの下にどんなコンテンツでも追加して、どちらかのタブから保存します。

これは実際に私の最初の質問の5つすべての点を解決します。ポイント2はまだ少し薄片ですが、私はほとんどの人々の目的のために、これが問題の世話をすると思います。私はある時点でこのプラグインをふるいにかけ、必要な部分を抽出し、それを私の検索結果と組み合わせ、そして公共のダウンロードのために再パッケージすることを計画しています。ここでの私の目標は、期待通りに書き込める簡単なワンクリックインストールプラグインを作成することです。

これが皆さんに役立つことを願っています！

5
Thought Space Designs

最初は、この問題はWPバージョン3.5以降で解決したと思います。 チケット19666 in 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;
}
3
bueltge

私はOPに似た問題を抱えていましたが、私にとっては<h1>を<div>に保持することに問題がありました。これは、テキストタブとビジュアルタブを切り替えている間、私が維持したかったものです： h1 in div and with div inside 

タブを切り替えるたびに<h1>タブが消えました。私はたくさんの検索をしました、そしてWordpress 4.7.3のために私はそこにたくさんの古い修正があることを知りました。 TinyMCEのバージョン3からバージョン4への市長のアップグレードがありました。バージョン3のソリューションはバージョン4ではうまくいきませんでした。もっとグーグルしてTinyMCEバージョン4オリジナル文書を読んだ後、私は特に私の場合の解決策を思い付きました：

  1. Advanced TinyMCE Con​​figurationプラグインをインストールする
  2. tinyMCEのvalid_children設定を+div[h1],h1[div]に設定
  3. さらにindent=true、forced_root_block=false、schema=html5を設定しました（forced_root_blockの説明を読むとwpautopの代替として理解しました）

その結果、私はこれを取得しました（そしてそれはタブの切り替えに耐性があります） enter image description here 

0
Marecky