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


27

カスタム投稿タイプに複数のWYSIWYGエディターを使用する方法はありますか?たとえば、2列のレイアウトがある場合、1つの列に1つのエディターを使用し、もう1つの列に別のエディターを使用したいと考えていました。


どのようなWYSIWYG構成が必要ですか?フルパネルを含む。画像のアップロード、フルスクリーンモードなど?
-hakre


Bueltgeには、その方法を示す素晴らしい記事があります。wpengineer.com
1991

クライアントプロジェクトでこの質問に答える必要があります。質問してくれてありがとう!
-MikeSchinkel

MikeSchinkel-私はWordPressが初めてです。投稿したコードはどこに置きますか?

回答:


21

カスタムポストタイプが呼び出されたとすると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エディターをテキストエリアにアタッチする必要があります。second_column_boxメタボックスのHTMLを出力する関数を定義する必要があるため、これを行うのに最適な場所です。

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挿入ボタンなしで、textareaが完全なtinyMCEと基本テキストエリアの間で変更されます。


「Meta_boxen」?驚くばかり!私は自分だけだと思った。しばらくしてソリューションを試してみます。
mfields

Thomas McDonaldsのソリューションは3.1では機能していません-3.1でこれを行う方法はありますか?

19

まず:ビッグのおかげ@Thomasマクドナルドのための彼の答え@Paul Sheldrakeが尋ねたのとまったく同じ質問を理解する必要があり、Thomasのコードは私を正しい方向に導きました。

残念ながら、サイドメタボックスでTinyMCEを使用する必要があるため、レイアウトをデフォルトからよりシンプルで小さなレイアウトに変更する必要があったため、スタックしました。解決策、特にMoxieCode TinyMCE WikiTinyMCE Tips&How To Forum実際にどこでも解決策を探しましたが、何も見つかりませんでした!1すべて私がどのようにセットに説明した、、使用、などしかし、あなたが使用するときに明らかにあなたがそれを使用することはできません。themewidthheighttinyMCE.init({...})tinyMCE.execCommand("mceAddControl")

私は記事に出会ったときに私は約困惑した1つのページに複数のTinyMCEの3つのインスタンスをすることによってハミルトンチュア、彼はそれを釘付け!彼の解決策は、をtinyMCE.settings呼び出す前に割り当てることtinyMCE.execCommand("mceAddControl")でした。例えば:

<?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を生成しました。

WordPress 3.0管理エディターの複数のTinyMCE TextAreas
(ソース:mikeschinkel.com

あなたが使用している場合@Thomasマクドナルドあなたの上にコードを使用すると、ハミルトンチュアの素晴らしい記事をチェックしてくださいレイアウト変更する必要があります見つける(感謝ハム!)

PS少しでも間違ったことをすると、TinyMCEがまったく表示されない場合があります。例えば私の場合theme: "simple"、私は最初に使用しましたが、何も得られませんでしたtheme: "advanced"。そのため、TinyMCEが機能していないことがわかった場合は、変更を試みてください。同様の問題が発生している可能性があります。(ところで、私は他のテーマを試していないし、他に利用できるものを探求していません。他のテーマが機能する場合は、以下にコメントを記入してください。)

脚注

1非常にイライラする!WordPress Answerで1か月以上たった今、すべての質問に対する答えがここと同じレベルであり、他の場所では失望することが多いと思っています。


マイク、あなたは平等を$script失い、またあなたのヒアドックを閉じることもありません。EOT;。小さなエラーは別として、良い例です。;)
t31os

@ t31os-お知らせいただきありがとうございます。どのようにそれらを見逃したかわからない。私は通常、作業コードからテストしてから回答をコピーします。ゴーフィギュア!
MikeSchinkel

このソリューションを使用すると、3.1でSimpleLayoutも通常のビジュアルエディターに設定されました。
mfields

@mfields-3.1が非常に多くのことを壊したという残念なこと。:-(
MikeSchinkel

:それはいくつかのことを明確にするように、この記事へのあなたの注意を引くために募集dannyvankooten.com/450/...
marfarma

2

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

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

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

TinyMCEエディターを追加する場所

参照: wp_editor


1
回答は単なるリンク以上であるべきです。彼らは、誰かが答えを見つけるかもしれないルートではなく、実際に答えであるべきです。リンクの腐敗を防ぎ、回答を編集し、OPおよび後の訪問者が問題を解決するのに役立つ必要な情報を提供してください。
カイザー14年

0

デフォルトのエディターtinymceは、wp-tiny_mce()と呼ばれるwp-admin / includes / post.phpの関数によってロードされます。 1350行目のソース見てください。1478行目に設定の配列があります。オプションの1つは、javascriptエディターを適用するtextareaセレクターを指定しているようです。Keighlの彼のブログでこの投稿を読んでいたので、それを指摘しました。記事を読んでください。管理セクションプラグインでwp_tiny_mce()を呼び出して、作成した2番目のテキスト領域に適用する方法があるかもしれません。


0

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