フロントエンドにTinyMCEエディターを含めるにはどうすればよいですか?


22

ユーザーが投稿できる場所からフロントエンドにTinyMCEエディターを追加しようとしていますが、これまでのところ運がありません。コードは次のとおりです。

PHP:

add_action('wp_print_scripts', 'my_enqueue_scripts');

function my_enqueue_scripts() {      
        wp_enqueue_script( 'tiny_mce' );
        if (function_exists('wp_tiny_mce')) wp_tiny_mce();
}

Javascript:

jQuery(document).ready(function(){
tinyMCE.init({
        mode : "textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"editor"
    });
});

HTML:

<textarea rows="8" cols="40" name="description" id="editor" class="required"><?php echo $description;?></textarea>

問題: Texteditorがtextareaに追加されません。TinyMCE jsファイルがロードされていますが。


回答:


17

さて、wp 3.3のおかげで、wp_editor()それを行う機能があります:)


1
はい、それは直接エディタを出力除いて、あなたはショートでそれを使用することが可能と対照的に...
cale_b

4
php ob_content関数を使用して、ショートコードでこれを使用できます。これらの関数を使用すると、出力を変数にキャプチャできます。そのように:ob_start(); include(static :: getTemplatePath()。 '/'。$ templatePath。 '.php'); $ template = ob_get_contents(); ob_end_clean(); return $ template;
トッシュ

2

editor_selector IDではなく、クラスをターゲティングするためのものです。

また、を使用editor_selectorする場合はmode: "specific_textareas"、動作させるために設定する必要があります。

http://tinymce.moxiecode.com/wiki.php/Configuration:editor_selectorを参照してください

したがって、JavaScriptとHTMLは次のようになります。

jQuery(document).ready(function(){
tinyMCE.init({
        mode : "specific_textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"tinymce-enabled"
    });
});

<textarea rows="8" cols="40" name="description" id="editor" class="tinymce-enabled required"><?php echo $description;?></textarea>

0

@maryisdeadの答えは正しいかもしれませんが、別のヒントを提供します。まず、ページにid = "editor"を持つ要素が1つだけあることを確認してから、tinymceを次のように設定します。

tinyMCE.init({
    ...
    mode : "exact",
    elements : "editor"
});

また、JavaScriptコードで$の代わりにjQueryを使用して、jQueryのメソッドとセレクターを呼び出していることを確認してください。


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