カスタム投稿タイプに複数のWYSIWYGエディターを使用する方法はありますか?たとえば、2列のレイアウトがある場合、1つの列に1つのエディターを使用し、もう1つの列に別のエディターを使用したいと考えていました。
カスタム投稿タイプに複数のWYSIWYGエディターを使用する方法はありますか?たとえば、2列のレイアウトがある場合、1つの列に1つのエディターを使用し、もう1つの列に別のエディターを使用したいと考えていました。
回答:
カスタムポストタイプが呼び出されたとすると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と基本テキストエリアの間で変更されます。
まず:ビッグのおかげに@Thomasマクドナルドのための彼の答え。@Paul Sheldrakeが尋ねたのとまったく同じ質問を理解する必要があり、Thomasのコードは私を正しい方向に導きました。
残念ながら、サイドメタボックスでTinyMCEを使用する必要があるため、レイアウトをデフォルトからよりシンプルで小さなレイアウトに変更する必要があったため、スタックしました。解決策、特にMoxieCode TinyMCE WikiとTinyMCE Tips&How To Forumで実際にどこでも解決策を探しましたが、何も見つかりませんでした!1すべて私がどのようにセットに説明した、、使用、などしかし、あなたが使用するときに明らかにあなたがそれを使用することはできません。theme
width
height
tinyMCE.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を生成しました。
(ソース:mikeschinkel.com)
あなたが使用している場合@Thomasマクドナルドあなたの上にコードを使用すると、ハミルトンチュアの素晴らしい記事をチェックしてくださいレイアウト変更する必要があります見つける(感謝ハム!) :
PS少しでも間違ったことをすると、TinyMCEがまったく表示されない場合があります。例えば私の場合theme: "simple"
、私は最初に使用しましたが、何も得られませんでしたtheme: "advanced"
。そのため、TinyMCEが機能していないことがわかった場合は、変更を試みてください。同様の問題が発生している可能性があります。(ところで、私は他のテーマを試していないし、他に利用できるものを探求していません。他のテーマが機能する場合は、以下にコメントを記入してください。)
1:非常にイライラする!WordPress Answerで1か月以上たった今、すべての質問に対する答えがここと同じレベルであり、他の場所では失望することが多いと思っています。
$script
失い、またあなたのヒアドックを閉じることもありません。EOT;
。小さなエラーは別として、良い例です。;)
Googleで最初の結果としてこの記事を見つけたので、WPがこの種のタスクを処理する機能を提供するようになったことをコメントしたいだけです。
add_meta_box
関数内で、次のコードを追加します->
wp_editor( $content, $editor_id, $settings = array() );
TinyMCEエディターを追加する場所
参照: wp_editor
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>