How do I include a TinyMCE editor in the frontend?
Pergunta
I am trying to add a TinyMCE editor in my frontend from where users can post but have had no luck so far. Here is the 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 not adding to textarea. Although the TinyMCE js file is loading.
Solução
Well, Thanks to wp 3.3 now we have wp_editor()
function to do that :)
Outras dicas
editor_selector
is for targeting classes, not ids.
Also, when using editor_selector
, it is required to set mode: "specific_textareas"
in order for it to work.
See http://tinymce.moxiecode.com/wiki.php/Configuration:editor_selector
So your JavaScript and HTML should look like this:
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>
Altough @maryisdead answer might be right, i'll give you another tip, first make sure there's only one element in your page with the id="editor" then setup tinymce like so:
tinyMCE.init({
...
mode : "exact",
elements : "editor"
});
Also use jQuery instead of $ in your javascript code to make sure you are calling jQuery methods and selectors.
editor_selector is for classes and not for ids.
You should use editor_selector's value as the class name of the textarea.