web-dev-qa-db-ja.com

WordPressプラグインでTinyMCEを呼び出す

TinyMCEを自分のWordPressプラグインに追加する方法はありますか？

バックエンドスクリプトにtextareaがあり、この領域をTinyMCE WYSIWYG編集可能フィールドにしたいと考えています。それを行う方法はありますか？

wysiwyg demonstration screenshot

このコードは私には機能しません：

<?php
    wp_tiny_mce(false,array("editor_selector" => "test"));
?>
<textarea class="test" id="test" name="test"></textarea>

JavaScriptエラーが表示されます

f is undefined

Firebugのスクリーンショット： TinyMCE error

これも機能しませんでした：

<textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea>
phpjavascriptwordpresspluginstinymce
38
choise

これは、WordPress 3.3で wp_editor（） 関数を使用して行うとはるかに簡単です。

TinyMCEインスタンスをテーマオプションページに追加するプラグインに取り組んでいます。これは次のようになります。

// Add TinyMCE visual editor
wp_editor( $content, $id );

ここで、$ contentは保存されたコンテンツであり、$ idは、フィールド。オプションを渡してTinyMCE機能をカスタマイズすることもできます。詳細については、WordPress Codexを確認してください。

36
Kevin Leary

カムデンはすでにこれに答えましたが、誰かが完全なコードを必要とする場合に備えて... admin_headにフックしてください。admin_enqueue_scriptsにフックすると、jQueryなどの他のスクリプトの前にロードされるため、機能しません。

add_action("admin_head","load_custom_wp_tiny_mce");
function load_custom_wp_tiny_mce() {

if (function_exists('wp_tiny_mce')) {

  add_filter('teeny_mce_before_init', create_function('$a', '
    $a["theme"] = "advanced";
    $a["skin"] = "wp_theme";
    $a["height"] = "200";
    $a["width"] = "800";
    $a["onpageload"] = "";
    $a["mode"] = "exact";
    $a["elements"] = "intro";
    $a["editor_selector"] = "mceEditor";
    $a["plugins"] = "safari,inlinepopups,spellchecker";

    $a["forced_root_block"] = false;
    $a["force_br_newlines"] = true;
    $a["force_p_newlines"] = false;
    $a["convert_newlines_to_brs"] = true;

    return $a;'));

 wp_tiny_mce(true);
}


}

次に、テンプレートのどこかに通常のテキストエリアを挿入します：

<textarea id="intro"></textarea>
11
Andy

次の例は私にとってはうまくいきます。必ず$ a ["elements"]変数で選択するテキストエリアのIDを使用してください。

'intro'のIDを持つtextareaがあると仮定します。

// attach the tiny mce editor to this textarea
if (function_exists('wp_tiny_mce')) {

  add_filter('teeny_mce_before_init', create_function('$a', '
    $a["theme"] = "advanced";
    $a["skin"] = "wp_theme";
    $a["height"] = "200";
    $a["width"] = "800";
    $a["onpageload"] = "";
    $a["mode"] = "exact";
    $a["elements"] = "intro";
    $a["editor_selector"] = "mceEditor";
    $a["plugins"] = "safari,inlinepopups,spellchecker";

    $a["forced_root_block"] = false;
    $a["force_br_newlines"] = true;
    $a["force_p_newlines"] = false;
    $a["convert_newlines_to_brs"] = true;

    return $a;'));

 wp_tiny_mce(true);
}

？>

7
Camden Daily

Tiny mce関数wp_tiny_mceが廃止されました。最新wordpressの場合、wp_editorを使用します

$initial_data='What you want to appear in the text box initially';
$settings = array(
'quicktags' => array('buttons' => 'em,strong,link',),
'text_area_name'=>'extra_content',//name you want for the textarea
'quicktags' => true,
'tinymce' => true
);
$id = 'editor-test';//has to be lower case
wp_editor($initial_data,$id,$settings);

詳細については、ワードプレスのドキュメントをご覧ください。

http://codex.wordpress.org/Function_Reference/wp_editor

4
Ranjith Siji

here および there （ this のおかげで見つかりました）のガイドに従って、wordpress 3.0.5：

<?php
add_action("admin_print_scripts", "js_libs");
function js_libs() {
    wp_enqueue_script('tiny_mce');
}
wp_tiny_mce( false , // true makes the editor "teeny"
    array(
        "editor_selector" => "tinymce_data"
    )
);
?>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a.toggleVisual').click(function() {
            console.log(tinyMCE.execCommand('mceAddControl', false, 'tinymce_data'));
        });
        $('a.toggleHTML').click(function() {
            console.log(tinyMCE.execCommand('mceRemoveControl', false, 'tinymce_data'));
        });
    });
</script>

<form method="post" action="">
<ul>
  <li>
    <span id="submit"><input class="button" type="submit"></span>
    <p id="toggle" align="right"><a class="button toggleVisual">Visual</a><a class="button toggleHTML">HTML</a></p>
  </li>
  <li><textarea style="width:100%;" class="tinymce_data" id="tinymce_data" name="tinymce_data"></textarea></li>
</ul>
</form>
2
cregox

私にも同様の問題があり、class="theEditor"も（最初は）助けにはなりませんでした。デフォルトのエディターを含まないカスタムの投稿タイプを使用していました（つまり、supports引数に'editor'が含まれていませんでした）。

つまり、WordPressにはTinyMCEコードが含まれていませんでした。

add_action( 'admin_print_footer_scripts', 'wp_tiny_mce', 25 );

私のfunctions.php（general-template.phpのthe_editor関数のコードに基づく）に対しては、（class="theEditor"を使用して）正常に機能しました。

1
Hobo

テスト済みで作業中wordpress 3.3.1

関数またはプラグインファイルに追加します。

<?php
    add_filter('admin_head','ShowTinyMCE');
    function ShowTinyMCE() {
        // conditions here
        wp_enqueue_script( 'common' );
        wp_enqueue_script( 'jquery-color' );
        wp_print_scripts('editor');
        if (function_exists('add_thickbox')) add_thickbox();
        wp_print_scripts('media-upload');
        if (function_exists('wp_tiny_mce')) wp_tiny_mce();
        wp_admin_css();
        wp_enqueue_script('utils');
        do_action("admin_print_styles-post-php");
        do_action('admin_print_styles');
    }
?>

新しいコンテンツを追加するため。

<?php the_editor($id='content');?>

コンテンツを編集して

<?php the_editor($mySavedContent); ?>

これには、プラグインまたはテンプレートファイル内でtinyMCEテキストエリアを作成するために必要な一連のスクリプト/ CSSおよびコードが含まれます。

お役に立てれば..

M

1
Marty

私はこれでかなりの問題を抱えていました。終日検索して数十のコード例を試した後、MCE値をデータベースに保存するためのWordpress=テーマオプションを取得できませんでした。すべて、jQueryの回答、非表示フィールドなどを試しました。おそらくどこかで一歩足りなかったためか、どれもうまくいきませんでした。

最後に私はこのページを見つけました： http://wptheming.com/options-framework-theme/

Githubからダウンロードして、指示に従ってインストールします（簡単）。インストールすると、テーマオプションの最後のタブにMCEエディターが表示されます。テストの段落をいくつか入力します。次に、ダウンロードでindex.phpファイルを開いて、ページに各Thingyを含める方法の例を確認します。たとえば、footer.phpを開いて、コードを少し追加します。

私が行う必要があった唯一の編集は：

<?php
$ft = of_get_option('example_editor', 'no entry');
$format_ft = wpautop( $ft, false );
echo ($format_ft);
?>

Wordpressからの関数wpautop（）は、wpデータベースに保存されないため、段落タグに追加します。MCEのコンテンツを表示するために、このコードをフッターに挿入しました。

1
Jennifer Michelle