web-dev-qa-db-ja.com

カスタム投稿タイプでN人のWYSIWYGエディタを取得する方法はありますか？

カスタム投稿タイプに複数のWYSIWYGエディタを配置する方法はありますか？たとえば、2列のレイアウトがある場合、1つの列に1人のエディタともう1人にもう1人のエディタが必要でした。

custom-post-typeswysiwyg
27
Paul Sheldrake

あなたのカスタム投稿タイプがPropertiesと呼ばれたとすると、あなたは追加のtinyMCEエディタを入れるためのボックスを追加するでしょう。

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
}
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2はメタボックスが適用されるID、Second Columnはメタボックスが持つタイトル、second_column_boxはメタボックスのHTMLをプリントアウトする関数、propertiesは私たちのカスタム投稿タイプ、normalはメタボックスの位置、およびhighは、ページのできるだけ高い位置に表示されるように指定します。 （通常はデフォルトのtinyMCEエディタの下）.

次に、これを最も基本的な例として、tinyMCEエディタをテキストエリアに添付する必要があります。メタボックスのHTMLを印刷するsecond_column_box関数を定義する必要があります。これは、これを行うのに最適な場所です。

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tinymce").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    }
});
</script>
    <textarea id="tinymce" name="tinymce"></textarea>
EOT;
}

克服する方法がわからない問題がいくつかあります。 tinyMCEエディタはメタボックスの中にネストされますが、これは理想的ではないかもしれません、そしてそれは通常のポストエディタが持っているメディア挿入コマンドと同様にHTMLとビジュアル編集モードを切り換える能力を特徴としません。モードの切り替えは、最初の引数がIDである関数として定義されているように見えますが、それでもwp-tinymceスクリプトにコーディングされているように見えます。組み込みのtinyMCE関数を使用することは可能ですが、WP HTML挿入ボタンを使用せずに、テキスト領域をフルtinyMCEと基本テキスト領域の間で変更できます。

20
nobody

最初：Big Thanksto@ Thomas McDonaldfor 彼の答え ; @ Paul Sheldrakeが尋ねたのとまったく同じ質問を理解する必要があり、Thomasのコードは私を正しい方向に導きました。

残念ながら、その後、横向きのメタボックスでTinyMCEを使用する必要があるため、レイアウトをデフォルトからよりシンプルで小さいレイアウトに変更する必要があるため、スタックしました。私は実用的に解決策を探して、特にMoxieCodeを探しました- TinyMCE Wiki と TinyMCE Tips＆How To Forum ！ 1 私が見つけたすべてのものは、tinyMCE.init({...})を使用してtheme、width、heightなどを設定する方法を説明しましたが、明らかにtinyMCE.execCommand("mceAddControl")を使用するときは使用できません。

1ページに複数のTinyMCE 3インスタンス by ハミルトン・チュア 、そして彼はそれを打ちました！彼の解決策は、tinyMCE.execCommand("mceAddControl")を呼び出す前にtinyMCE.settingsを割り当てることでした。例えば：

<?php 
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#{$id}").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
      tinyMCE.settings = {
        theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      };
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
    }
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;

悲しい部分は、これは本当に難しいことではありませんでしたが、私が見つけることができる他のどこにも記録されていませんでした。この問題を経験した人がほとんどいないことを発見するのは驚くべきことです。

とにかく、上記のコードは、クライアントが必要とする正確なフォーマット/レイアウトで次の2番目のTinyMCEを生成しました。

Multiple TinyMCE TextAreas in the WordPress 3.0 Admin Editor
（ソース： mikeschinkel.com ）

したがって、上記の@ Thomas McDonaldコードを使用している場合、レイアウトを変更する必要があることがわかります。ハミルトンチュアの素晴らしい記事（thanksハム！）：

P.S。少しでも間違っていると、TinyMCEがまったく表示されない場合があります。たとえば、私の場合、最初にtheme: "simple"を使用しましたが、何も得られず、theme: "advanced"を使用するだけでよいことに気付くのに1時間以上かかりました。したがって、TinyMCEが機能しないことがわかった場合は、周囲の状況を変更してみてください。同様の問題が発生している可能性があります。 （ところで、私は他のテーマを試したことがなく、他に利用できるものを調査していません。他の機能するテーマを見つけたら、下のコメントを聞かせてください）

脚注

1：非常にイライラする！ WordPress Answerで1か月を少し過ぎた後、すべての質問に対する回答をここと同じレベルの品質で見つけることができると期待しています。他の場所では通常失望を感じています！

19
MikeSchinkel

この記事をGoogleで最初の記事として見つけたので、WPがこのようなタスクを処理する機能を提供するようになったことをコメントしたいだけです。

add_meta_box関数内に、次のコードを追加します - >

wp_editor( $content, $editor_id, $settings = array() );

TinyMCEエディタを追加したいところならどこにでも

参照： wp_editor

1
ejhost

TextAreaにclass属性として「theEditor」を追加するだけで得られます。

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>
0
Markus René Einicher

デフォルトのエディタtinymceは、wp-admin/includes/post.php内のwp_tiny_mce（）という関数によってロードされます。 ソースを見てください 1350行目。1478行目に一連の設定があります。オプションの1つは、JavaScriptエディタを適用するテキストエリアセレクタを指定しているようです。私は Keighlによるこの記事 を読んでいました - /彼のブログで私はそれを私に向けていました。記事を読んでください、そしておそらくadminセクションのプラグインでwp_tiny_mce（）を呼び出して、あなたが作成した2番目のテキスト領域にそれを適用する方法があります。

0
kevtrout