¿Cómo incluyo un editor de TinyMCE en la interfaz?

Question

Estoy tratando de agregar un editor de TinyMCE en mi interfaz desde donde los usuarios pueden publicar, pero hasta ahora no he tenido suerte. Aquí está el código:

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>

Problema: TextEditor no se agrega a TextARea. Aunque el archivo TinyMce JS se está cargando.

Answer 1

Bueno, gracias a WP 3.3 ahora tenemos wp_editor() función para hacer eso :)

Answer 2

editor_selector es para clases de orientación, no IDS.

Además, al usar editor_selector, se requiere establecer mode: "specific_textareas" Para que funcione.

Ver http://tinymce.moxiecode.com/wiki.php/configuration:editor_selector

Entonces su JavaScript y HTML deberían verse así:

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>

Answer 3

Atrough @maryisdead respuesta podría ser correcto, le daré otro consejo, primero asegúrese de que solo haya un elemento en su página con el id = "Editor" y luego configure TinyMCE así:

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

También use jQuery en lugar de $ en su código JavaScript para asegurarse de llamar a los métodos y selectores jQuery.

Answer 4

editor_selector es para clases y no para IDS.

Debe usar el valor de Editor_Selector como el nombre de clase de TextArea.