Wie binde ich einen TinyMCE-Editor in das Frontend ein?

22

Ich versuche, einen TinyMCE-Editor in mein Frontend aufzunehmen, von dem aus Benutzer Beiträge schreiben können, aber bisher kein Glück gehabt haben. Hier ist der Code:

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>

Problem: Texteditor fügt keine Textfläche hinzu. Obwohl die TinyMCE-js-Datei geladen wird.

tinymce front-end

— Sisir
quelle

1

Vielleicht finden Sie Inspiration, wenn Sie sich den Code des Frontend-Editors

— ansehen

17

Nun, dank wp 3.3 haben wir jetzt die wp_editor()Funktion, das zu tun :)

— Sisir
quelle

1

Ja, außer dass der Editor direkt

— ausgegeben wird, anstatt

4

Sie können dies in einem Shortcode verwenden, indem Sie die Funktionen von php ob_content verwenden. Mit diesen Funktionen können Sie die Ausgabe in einer Variablen erfassen. So ähnlich: ob_start (); include (static :: getTemplatePath (). '/'. $ templatePath. '.php'); $ template = ob_get_contents (); ob_end_clean (); return $ template;

— Tosh

2

editor_selector richtet sich an Klassen, nicht an IDs.

Bei der Verwendung editor_selectormuss außerdem eingestellt mode: "specific_textareas"werden, damit es funktioniert.

Siehe http://tinymce.moxiecode.com/wiki.php/Configuration:editor_selector

Ihr JavaScript und HTML sollten also so aussehen:

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>

— Maryisdead
quelle

0

Auch wenn die Antwort von @maryisdead richtig sein mag, gebe ich Ihnen einen weiteren Tipp. Stellen Sie zunächst sicher, dass nur ein Element auf Ihrer Seite mit id = "editor" vorhanden ist, und richten Sie dann Tinymce wie folgt ein:

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

Verwenden Sie auch jQuery anstelle von $ in Ihrem Javascript-Code, um sicherzustellen, dass Sie jQuery-Methoden und Selektoren aufrufen.

— adrian7
quelle

0

editor_selector ist für Klassen und nicht für IDs.

Sie sollten den Wert von editor_selector als Klassennamen des Textbereichs verwenden.

— Franklin Inbaraj
quelle