¿Cómo incluir un editor TinyMCE en el frontend?

Question

¿Cómo incluir un editor TinyMCE en el frontend?

20 may 2011, 13:26:11

Vistas: 36.8K

Votos: 27

Estoy tratando de agregar un editor TinyMCE en mi frontend desde donde los usuarios pueden publicar, pero hasta ahora no he tenido éxito. 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: El editor de texto no se está agregando al textarea. Aunque el archivo js de TinyMCE se está cargando.

Sisir

7.82K

tinymce front end

Comentarios

Quizás encuentres algo de inspiración viendo el código del Editor Frontend

mike23

15 jun 2011 10:57:24

Todas las respuestas a la pregunta

Comentarios

Sí, excepto que muestra el editor directamente, en lugar de permitirte usarlo en un shortcode...

random_user_name

5 dic 2012 05:35:37

Puedes usar esto en un shortcode utilizando las funciones ob_content de php. Estas funciones te permiten capturar la salida en una variable. Así: ob_start(); include( static::getTemplatePath() . '/' . $templatePath . '.php'); $template = ob_get_contents(); ob_end_clean(); return $template;

Tosh

2 abr 2014 17:33:27

editor_selector se utiliza para apuntar a clases, no a IDs.

Además, cuando se usa editor_selector, es necesario configurar mode: "specific_textareas" para que funcione correctamente.

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

Por lo tanto, tu código JavaScript y HTML debería 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>

maryisdead

823

26 jun 2011 00:15:58

Aunque la respuesta de @maryisdead podría ser correcta, te daré otro consejo: primero asegúrate de que solo haya un elemento en tu página con el id="editor" y luego configura tinymce de la siguiente manera:

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

También usa jQuery en lugar de $ en tu código JavaScript para asegurarte de que estás llamando a los métodos y selectores de jQuery.

adrian7

316

5 ago 2011 23:00:59

editor_selector es para clases y no para IDs.

Debes usar el valor de editor_selector como el nombre de clase del textarea.

Franklin Inbaraj

1

29 mar 2016 08:53:34

Sisir 7.82K · Accepted Answer · 2011-12-12T15:06:00Z

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

Sisir

7.82K

12 dic 2011 15:06:00