エディタでHTMLモードを強制する方法

解決済 moyata
(@moyata)

11年、 8ヶ月前

ビジュアルモードで許容されないHTMLをエディタのHTMLモードで固定ページに
保存して使用しています。

このページを再編集する際、開いた時にエディタがビジュアルモードであったり、
HTMLモードとビジュアルモードの行き来をすると一部のタグや属性の削除が起きます。

そのため、固定ページの作成／編集の際、ビジュアルモードとHTMLモードの
どちらを最後に使用したかによらず、必ずHTMLモードで開くようにしたいと考えて
います（自分だけなら良いのですが、他にあまり詳しくない編集者がいるため）。

固定ページ以外ではビジュアルモードも使いたいことや、「qTranslate」という
多言語プラグインに影響があることから、「ユーザー＞プロフィール」の
「ビジュアルリッチエディターを使用しない」という設定は使えません。

少しソースを追ったところ、
「wp-includes/class-wp-editor.php」の「_WP_Editors::editor()」で
「if ( ‘html’ == wp_default_editor() )」をtrueに強制すると、
エディタの切り替えタブはHTMLモードにできることが分かりましたが、
入力欄の内容は最後に使用したモードに依存して表示されてしまいます。

入力欄の表示は、ビジュアルモード用とHTMLモード用で別になっていて、
JavaScript（switchEditors.switchto(this);）でモードを切り替えるように
なっていますが、初期表示の処理がどこにあるのかが分からず、行き詰って
おります。

エディタでHTMLモードを強制する方法について、アドバイスをいただけませんでしょうか。
よろしくお願い致します。

15件の返信を表示中 - 1 - 15件目 (全18件中)

1 2 →

orangethyme
(@orangethyme)

11年、 8ヶ月前

私はビジュアルの影響を受けるｈｔｍｌは
http://wordpress.org/extend/plugins/raw-html-snippets/
を使用しています。
nobita
(@nobita)

11年、 8ヶ月前
こんにちは

思いつきなので、検証してみてください

functions.php
```
/*if( get_post_type() == 'page' ){ 理由はわかりませんがこれ使えない模様*/
if( $_GET['post_type'] == 'page' ){//これは動くようです
	add_filter('user_can_richedit' , '__return_false');
}
```
よろしければ、検証結果をここに残していただけるとうれしいです。
トピック投稿者 moyata
(@moyata)

11年、 8ヶ月前

> 私はビジュアルの影響を受けるｈｔｍｌは
> http://wordpress.org/extend/plugins/raw-html-snippets/
> を使用しています。

返信ありがとうございます。
プラグインをインストールして試してみました。
局所的に使うにはシンプルで良さそうです。
今回、既に、かなり多くの固定ページを作成して運用中でして、操作方法などがかなり変わってしまうため、今後、活用させていただこうと思います。

> 思いつきなので、検証してみてください
> functions.php

返信ありがとうございます。
試してみましたところ、恐らく
『「ユーザー＞プロフィール」の「ビジュアルリッチエディターを使用しない」』と
同じ状態になりました。

今回、「qTranslate」という多言語プラグインを使用しておりまして、これが
ビジュアルモードとHTMLモードの切り替えUIに言語切替UIを並べる仕様のため、
「ビジュアルリッチエディターを使用しない」が使用できません。

> /*if( get_post_type() == ‘page’ ){ 理由はわかりませんがこれ使えない模様*/
> get_post_type() == ‘page’
> $_GET[‘post_type’] == ‘page’

管理画面の作成／編集画面では、URLのGETパラメータに「post_type」が付いていない
ので、上記条件は何れも使用できないですね。

引き続き、何かアドバイスがございましたらよろしくお願い致します。

管理画面の作成／編集画面で実谷されるJavaScriptのハックで対応できないかと
考えております。
モデレーター gatespace
(@gatespace)

11年、 8ヶ月前
こんにちは。
ビジュアルエディターで特定のタグを許容したいのであれば、
本家フォーラムに投稿がありますのでそちらを参考にしてみてください。
（3番目のOttoさんのコメント参照）
http://wordpress.org/support/topic/wordpress-28-no-more-iframe?replies=7

テーマのfunctions.phpに追記。
```
function add_iframe($initArray) {
  $initArray['extended_valid_elements'] = "iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]";
  return $initArray;
}

add_filter('tiny_mce_before_init', 'add_iframe');
```
このコードではiframeを許可しています。
moyataさんが使いたいタグにあわせて改変してみてください。
nobita
(@nobita)

11年、 8ヶ月前
こんにちは

管理画面の作成／編集画面では、URLのGETパラメータに「post_type」が付いていない
ので、上記条件は何れも使用できないですね。

新規作成画面を想定したコードを書きましたが、編集では使えないという意味でしたら
```
if( isset( $_GET['post'] ) and is_numeric( $_GET['post'] ) ){
	$post_id 	= ( int ) $_GET['post'];
	$post 		= get_post( $post_id );
	$post_type 	= $post->post_type;

	if( is_admin() and $post_type == 'page' ){
		add_filter('user_can_richedit' , '__return_false');
	}
}
```
などと、ちょっと工夫をすると同じような動作になると思いますが、勘違いしていましたら、ご指摘ください

管理画面の作成／編集画面で実谷されるJavaScriptのハックで対応できないかと
考えております

うまくいきましたら　私にも教えてください 🙂
nobita
(@nobita)

11年、 8ヶ月前

こんにちは、
追伸：
変数名は、実際に使う場合は　$my_postとか　prefix　付けて使ってください。
kz
(@kz)

11年、 8ヶ月前
元々のやりたいことは gatespace さんの方法で、
件名通りのことなら以下をテーマフォルダの functions.php に貼付けで OK◎
```
add_filter( 'wp_default_editor', 'my_default_editor' );
function my_default_editor( $r ) {
  if ( 'page' == get_current_screen()->id ) {
    $r = 'html';
  }
  return $r;
}
```
nobita
(@nobita)

11年、 8ヶ月前
勉強になります

書き直させてください
```
add_filter('user_can_richedit' , 'my_default_editor');

function my_default_editor( $r ) {
 if ( 'page'== get_current_screen()->id ) {
 return false;
 }
 return $r;
}
```
トピック投稿者 moyata
(@moyata)

11年、 8ヶ月前

> ビジュアルエディターで特定のタグを許容したいのであれば、
> 本家フォーラムに投稿がありますのでそちらを参考にしてみてください。

ご返信ありがとうございます。
ビジュアルエディターでのタグ除去回避、試してみます。

「ビジュアルエディターでのタグ除去回避」というのも理由ではあるのですが、
確実な編集を行うため、必ずHTMLモードで編集させたいという目的もあり、
いろいろ試しています。

========================================

> 新規作成画面を想定したコードを書きましたが、編集では使えないという意味でしたら
> などと、ちょっと工夫をすると同じような動作になると思いますが、勘違いしていましたら、ご指摘ください

ありがとうございます。
はい、モードの取得はアドバイスいただいた方法などでできると思いますが、
残念ながら今回は、「’user_can_richedit’」、つまり「ビジュアルリッチエディターを使用しない」は
多言語プラグインの関係で、使用することができないのです。

========================================

> 元々のやりたいことは gatespace さんの方法で、
> 件名通りのことなら以下をテーマフォルダの functions.php に貼付けで OK◎

ご返信ありがとうございます。

やってみたのですが、ビジュアルとHTMLのタブは切り替わりましたが、固定ページ以外で
前回使用したのがビジュアルであった場合、編集エリアの内容はビジュアルのままでした。

ページを開いた段階で編集エリアをHTMLモードの状態にしたいのですが、
どのようにすればお分かりでしょうか。

jdbb
(@jdbb)

11年、 8ヶ月前

私の場合ですが
cookieのwp-settings-1にそれぞれ
editor=html&m0=c&m1=c&m2=c&m3=c&m4=c&m5=c&m6=c&m7=c&m8=c&m9=c&m10=c&m11=c&m12=c&m13=c&m14=c
editor=tinymce&m0=c&m1=c&m2=c&m3=c&m4=c&m5=c&m6=c&m7=c&m8=c&m9=c&m10=c&m11=c&m12=c&m13=c&m14=c

となっていたのでこれを直接変えてやればいいとは思いますが
一旦読み込んで書き換えた後にもう一度表示し直す必要がある・・・・のかな？
cookie関係なく強制的に切り替わるようなhookがあればよさそうですが

モデレーター gatespace
(@gatespace)

11年、 8ヶ月前

kzさんのコードはmoyataさんが最初に投稿された情報を元にされています。

固定ページの作成／編集の際、ビジュアルモードとHTMLモードの
どちらを最後に使用したかによらず、必ずHTMLモードで開くようにしたいと考えて
います
（中略）
固定ページ以外ではビジュアルモードも使いたいことや、（略）

最初は「固定ページで」とおっしゃっていたのに

やってみたのですが、ビジュアルとHTMLのタブは切り替わりましたが、固定ページ以外で
前回使用したのがビジュアルであった場合、編集エリアの内容はビジュアルのままでした。

途中で、「固定ページ以外でもやりたい」に変わってるじゃないですか。

結局どうしたいのですか？
nobita
(@nobita)

11年、 8ヶ月前
こんにちは

理解できました、お騒がせしました。

やってみたのですが、ビジュアルとHTMLのタブは切り替わりましたが、固定ページ以外で
前回使用したのがビジュアルであった場合、編集エリアの内容はビジュアルのままでした。

ページを開いた段階で編集エリアをHTMLモードの状態にしたいのですが、
どのようにすればお分かりでしょうか。

kzさんのコードを以下のように変更しても、うまくいかないという意味ですか？
```
add_filter( 'wp_default_editor', 'my_default_editor' );
function my_default_editor( $r ) {
  //if ( 'page' == get_current_screen()->id ) {
    $r = 'html';
 // }
  return $r;
}
```
は、試しましたか？

すみません、いまさら、素朴な疑問？

ビジュアルエディターで特定のタグを許容したいのであれば、

wp-includes/class-wp-editor.php
line:401
```
// Best is to use the default cleanup by not specifying valid_elements, as TinyMCE contains full set of XHTML 1.0.
```
となっていて、extended_valid_elementsは、html5の要素が追加されているので、
line320:
```
'extended_valid_elements' => 'article[*],aside[*],audio[*],canvas[*],command[*],datalist[*],details[*],embed[*],figcaption[*],figure[*],footer[*],header[*],hgroup[*],keygen[*],mark[*],meter[*],nav[*],output[*],progress[*],section[*],source[*],summary,time[*],video[*],wbr'
```
昔の、WordPressと違って、3.4.1(3.3.1でも)は、tinymceは、要素の制限をしていないのではないかと思うのですが、
書き換わるのは、kses.phpの制限と関係する事を仰っているのかも、と思い直しています。

タブのほうは、まもなく解決すると思いますが、

どんなエレメントまたは、アトリビュートがどの権限で、書き換わるのか、教えてください
トピック投稿者 moyata
(@moyata)

11年、 8ヶ月前

> 私の場合ですが
> cookieのwp-settings-1にそれぞれ

ご返信ありがとうございます。
主に他のメンバーへの対策なので、cookieを直接いじるというのは状況的には難しいかなと
思っております。

また、前回のエディター種別（ビジュアル、HTML）がクッキーから取得できればクッキーの
値を使用し、クッキーから取得できなければDBから取得ということではないかと思うので、
「wp-includes/class-wp-editor.php」の「_WP_Editors::editor()」で
「if ( ‘html’ == wp_default_editor() )」をtrueに強制すると同じようなことかと
想像しております。

========================================

> 最初は「固定ページで」とおっしゃっていたのに
> 途中で、「固定ページ以外でもやりたい」に変わってるじゃないですか。

ご返信ありがとうございます。
混乱させてしまい、申し訳ございません。

「固定ページ以外で前回使用したのがビジュアルであった場合、編集エリアの内容は
ビジュアルのままでした。」

というのは、

「固定ページ以外で前回使用したのがビジュアルであった場合、その後、
固定ページに戻ってページの編集を行うと、編集エリアの内容はビジュアルの
ままでした。」

という意味です。

最後に使用したモード（ビジュアル or HTML）が保持されますが、この単位は
「ユーザーごと」であって、「ユーザーごと投稿タイプごと」ではないのが
この原因となります。

========================================

> kzさんのコードを以下のように変更しても、うまくいかないという意味ですか？

はい、試しましたが

固定ページ以外で前回使用したのがビジュアルであった場合、その後、
固定ページに戻ってページの編集を行うと、タブの表示はHTMLとなっていますが、
編集エリアの内容はビジュアルのままという状況です。

私が最初の投稿で書きました
「if ( ‘html’ == wp_default_editor() )」をtrueに強制」という方法でも同様の
状況でしたので、このあたりの制御とは別の場所で、エディタの編集エリアの初期表示
を制御している部分があるものと思っております。

エディタの編集エリアをビジュアルモードの表示にするかHTMLモードの表示にするかの
切り替えはJavaScriptで行われておりますが、タブをクリックした際に実行される
処理と同様の処理が恐らく初期表示時にも実行されており、その条件判断をしている
部分がどこなのかが分かると、今回の問題は解決しそうです。

> どんなエレメントまたは、アトリビュートがどの権限で、書き換わるのか、教えてください

こちらは追って記載しますね。
nobita
(@nobita)

11年、 8ヶ月前
こんにちは
以下の手順でテストしました

1 page
mode:html 画像を挿入　更新更新ボタンを押したあとは、タブhtml
2 post
mode:ビジュアル　画像を挿入、画像をクリックしてサイズを編集　
更新　ボタンを押したあとは、タブhtml
3 page 一覧を開く
日時をクリックして、先ほど更新したページを先頭に表示
4 pageを編集をクリックして開く
mode:htmlで開いて、画像はhtmlソースで表示されました。

4のtextareaがビジュアルモードになっていると理解していたのですが、再現できません。

環境的なものが絡んでいるかもしれないので、念のため
```
add_filter( 'wp_default_editor', 'my_default_editor',ここにプライオリティを入れて、試してみたほうがいいかも );
function my_default_editor( $r ) {
  //if ( 'page' == get_current_screen()->id ) {
    $r = 'html';
 // }
  return $r;
}
```
と思いました
トピック投稿者 moyata
(@moyata)

11年、 8ヶ月前

いるいろお試しいただき、どうもありがとうございます。

お試しいただいた手順と同様に試しましたが、
「4のtextareaがビジュアルモード」となりました。

2 post
mode:ビジュアル　画像を挿入、画像をクリックしてサイズを編集
更新　ボタンを押したあとは、タブhtml

上記で、更新　ボタンを押したあと「タブhtml」になりますが、
こちらでは、編集エリアは「ビジュアル」の表示のままです。
そちらではいかがでしょうか。

ここの挙動は、「4のtextareaがビジュアルモード」と同じことだと
思っています。

ここにプライオリティを入れて、試してみたほうがいいかも

プライオリティとして、0、1、100を試しましたが、特に挙動はかわりませんでした。