VisualタブとHTMLタブを自由に切り替える


21

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

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コアの根本的な問題です(本当にバグではありませんが)。

編集:申し分なく、私はこれに取り組んできました、そして、リバースエンジニアリングがこの問題を解決する最良の方法になると思っています。そのため、今のところ、wpautopを無効にしました(わかりやすくするために、テキストが保存されるときではなく、テキストが表示される前に pタグとbrタグを追加する "the_content"フィルターにフックする機能です。この関数の動作については、wpautopは、エディターのタブを切り替えたときに発生する変更については責任を負いません。

とにかく、wpautopを無効にしました。これは、HTMLエディターを使用するときの良い習慣です。その時点から、投稿を保存するときに表示される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構造が失われます。ウィンドウに読み込む前に、preタグのすべてを同等のエンティティに変換するようTinyMCEに指示する方法を見つける必要があります(基本的に、フロントエンドで行ったことのバックエンドバージョンですが、phpとフックの代わりにtinymceとjavascriptを使用)。処理される代わりに表示されるようにします。提案?sウィンドウにロードする前の同等のエンティティ(基本的にフロントエンドで行ったことのバックエンドバージョンですが、phpとフックの代わりにtinymceとjavascriptを使用)。処理される代わりに表示されます。提案?sウィンドウにロードする前の同等のエンティティ(基本的にフロントエンドで行ったことのバックエンドバージョンですが、phpとフックの代わりにtinymceとjavascriptを使用)。処理される代わりに表示されます。提案?

編集2

さらに調査した結果、preタグ内のエンティティを表示時に変換すると、preタグ内のコンテンツに対して正常に機能しますが、次のような行を含むブログ投稿があるとします。

「次に、この行をHTMLファイルに追加する必要があります:<p> Hello、World!</ p>」

この行を見ると、コードはサイトに表示され、解析されないはずであることがわかりますが、投稿が保存されると、これらのエンティティは次の投稿編集ロードでデコードされ、その後の保存で保存されます未加工のhtmlタグとして、フロントエンドで解析されます。私がこれまでに考えられる唯一の解決策は、事前に使用している「コード」タグに同様のコードを記述し、次に「コード」タグに小さなライナーを、そして「pre」タグ。誰か他のアイデアがありますか?


2
素敵な投稿。そのTinyMCEが頭痛だけを引き起こした。私は最近CKEditorに切り替えましたが、それがどのように維持されているかを言うのは早すぎます。投稿で言及しなかった問題の1つは、Wordから貼り付けるときの余分なcr **です。
トウィフティ

私は自分のサイトでCKeditorをしばらく使用して、これが必要な解決策だと考えましたが、残念ながら、ここでの問題は、TinyMCE自体ではなく、TinyMCEから受け取ったデータのWordpressの処理とフォーマットにあります。適切なタイミングでWordpressに接続して、目的の効果を作成する方法があります。しかし、CKeditorは間違いなく良いプラグインであり、私が探しているものではありません。
思考スペースデザイン

1
また、TinyMCEの「キッチンシンク」にある「単語から貼り付け」機能を知っていますか?これで、Wordから貼り付けるときに「余分ながらくた」の問題が解決されます。
思考スペースデザイン

7
素晴らしい質問です。スパイスをかけるには:200の賞金でソリューションに報酬を与えます。実際に答えが出るまで待つので、賞金の期限が早すぎることはありません。
fuxia

回答:


5

わかりましたので、私はすでにこの質問を1トン更新しており、それが過負荷になり始めているので、完全ではないのに答えとしてこれを書くと思いました。

@bueltgeの答えから外挿すると、実際に戻って、問題の彼の以前の投稿を見つけました。その投稿には、今まで見たことのないプラグイン「Preserved HTML Editor Markup」がリストされていました。このプラグインはしばらく更新されていませんが、WP 3.6.1でテストしたばかりで、完全に機能します。このプラグインは自動的にwpautopを処理し、ビジュアルエディター内にbrおよびpタグを挿入するための統一された形式を提供し、タブを切り替えるときにマークアップを保持します。

私自身の目的のために、このプラグインを独自の機能で拡張しました。「<code>」タグ内のhtmlタグを保存時にそれぞれのエンティティに自動変換します。これは、テキストタブ内のコードタグで標準のHTMLコードを記述して保存できることを意味し、preタグ内のすべてのものは、サイトのフロントエンドおよびビジュアルエディターで適切に表示するためにエンティティに変換されます。それは私がまだ見つけた最もエレガントなソリューションではありませんが、うまくいくようです。プラグインをアクティブにした後、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」フィールドがあり、ビジュアルタブに移動してコードに新しい行を挿入しようとすると、brタグHTMLのコードタグに挿入されます。TinyMCEでこれを無効にするオプションが必要です。とにかく、テキストタブから事前フィールドを編集する限り、タブ間を自由に切り替えたり、任意のタブの下にコンテンツを追加したり、いずれかのタブから保存したりすることができ、フォーマットの混乱を心配する必要はありません!

これは実際に私の最初の質問の5つのポイントすべてを解決します。ポイント2はまだ少し不安定ですが、ほとんどの人々の目的のために、これは問題を処理します。ある時点でこのプラグインをふるいにかけ、必要な部分を抽出し、見つけたものと組み合わせて、再ダウンロードして公開ダウンロードする予定です。ここでの私の目標は、期待どおりに動作するシンプルなワンクリックインストールプラグインを作成することです。

これがみんなに役立つことを願っています!


3

最初、この問題はWPバージョン3.5以降で解決されたと思います。tracのチケット19666を参照してください。しかし、tinyMCEには、エディター内のコンテンツを変更する機会があり、フロントエンドの出力を解析しないでください。

小さなソーススクリプト。私は現在のWPバージョンでこれをテストしていませんが、顧客にとっては古いソリューションでした。

プラグインを介してこのソースを追加し、マークアップを強化します。htmlタグの機能チェックは、<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.5で解決された問題は、まったく同じ問題ではありません。私が持っている問題は、VisualからHTMLに切り替えるときに改行が削除されることではなく、すべてのタグがpreタグのタグも含めて、ソースHTMLとして解釈され、エンティティとしてエンコードされていないため表示されないことですHTMLパネルで。この関数はTinyMCEの動作を変更して、preのHTMLが処理される代わりに表示されるようにしますか?
思考スペースデザイン

これが機能する小さなテストでは、エンティティはhtmlからビジュアルへの切り替えを行い、コンテンツを保存して戻します。
-bueltge

これを今日テストして、探しているものが確実に達成されるようにします。
思考スペースデザイン

OK、返信を待ってください。質問の例からのソースでこれをテストしました。正しくないことがわかった場合は、ここでこれを強化してください。
-bueltge

私の答えを参照してください...
思考スペースデザイン

0

OPに似た問題がありましたが、私にとっては問題があり<h1>ました<div>。これは、テキストタブとビジュアルタブを切り替えるときに保持したいものです。 div内およびdiv内のh1

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

  1. Advanced TinyMCE Con​​figurationプラグインをインストールする
  2. TinyMCE valid_children設定を+div[h1],h1[div]
  3. 私はadditonnaly構成indent=trueforced_root_block=false及びschema=html5(私が読んだときforced_root_blockの説明を私はそれを理解wpautop代替)

その結果、私はこれを取得します(そしてタブの切り替えに耐性があります) ここに画像の説明を入力してください

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.