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

22

Estoy tratando de agregar un editor 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 agrega a textarea. Aunque el archivo TinyMCE js se está cargando.

tinymce front-end

— Sisir
fuente

1

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

— mike23

17

Bueno, gracias a wp 3.3 ahora tenemos la wp_editor()función para hacerlo :)

— Sisir
fuente

1

Sí, excepto que emite el editor de forma directa, a diferencia de lo que le permite utilizarlo en un código corto ...

— cale_b

44

Puede usar esto en un código corto usando las funciones php ob_content. Estas funciones le permiten capturar la salida en una variable. Me gusta así: ob_start (); include (static :: getTemplatePath (). '/'. $ templatePath. '.php'); $ template = ob_get_contents (); ob_end_clean (); devolver $ plantilla;

— Tosh

2

editor_selector es para orientar clases, no identificadores.

Además, cuando se usa editor_selector, es necesario configurarlo 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>

— maryisdead
fuente

0

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

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

También use jQuery en lugar de $ en su código javascript para asegurarse de que está llamando a los métodos y selectores de jQuery.

— adrian7
fuente

0

editor_selector es para clases y no para identificadores.

Debe usar el valor del editor_selector como el nombre de clase del área de texto.

— Franklin Inbaraj
fuente