¿Cómo establecer el ancho de textarea usando tinymce?

Question

Intenté varios métodos para establecer el ancho del área de texto de tinymce.

Mi primera tentativa:

height: '200px', 
width: '220px' // inside tinyMCE.init({ 

En el segundo intento:

<textarea name="editorial" cols="40" rows="20" id="editorial" style="width: 40em; height: 20em"><?=$row['editorial']?></textarea> 

Pero aún así, no soy capaz de obtener la anchura como por mi requerimiento.

¿Alguna idea por favor?

Answer 1

Creo que el problema puede estar en las barras de herramientas en su función TinyMCE init.

Prueba este ejemplo y avísame si te funciona.

en el código HTML:

<textarea name="editorial" class="test" cols="40" rows="20" id="editorial" > editorial</textarea> 

continuación, utilizar este tinyMCE.init en su JavaScript:

tinyMCE.init({ 
     // General options 
     mode: "textareas", 
     theme: "advanced", 
     width: "300", 
     height: "200", 

     // Theme options 
     theme_advanced_buttons1: "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull", 
     theme_advanced_buttons2: "", 
     theme_advanced_buttons3: "", 
     theme_advanced_buttons4: "", 
     theme_advanced_toolbar_location: "top", 
     theme_advanced_toolbar_align: "left", 
     theme_advanced_resizing: false, 

    // Selector 
     editor_selector: "test", 

}); 

hace este trabajo para usted?

Answer 2

Lo curioso es que el ancho y el alto se establecen en la propiedad de estilo del iframe.

lo que hago para poner mi ancho de acuerdo a mi entorno de inicio es para modificar la propiedad de estilo del marco flotante:

// ed is the editor instance 
var frameid = frameid ? frameid : ed.id+'_ifr'; 

// get iframe 
var current_iframe = document.getElementById(frameid); 

if (current_iframe && !window.opera){ 

    styles = current_iframe.getAttribute('style').split(';'); //width and heigth 
    for (var i=0; i<styles.length; i++) { 
    // case width setting is found - remove it 
    if (styles[i].search('width:') == 1){ 
     styles.splice(i,1); 
     break; 
    } 
    current_iframe.setAttribute('style', styles.join(';')); // write styles back to the iframe 
    current_iframe.width = ed.getParam('width'); // set the width i already set in the configuration 
} 

Answer 3

Se puede utilizar de esta manera ..

tinymce.init({ 
selector: "textarea", 
plugins: [ 
      "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", 
      "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", 
      "table contextmenu directionality emoticons template textcolor paste fullpage textcolor" 
    ], 

    toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect", 
    toolbar2: "cut copy paste | bullist numlist | outdent indent blockquote | undo redo | anchor | forecolor backcolor", 


    menubar: false, 
    toolbar_items_size: 'small', 

    height: "100", 
    width:500, 

}); 

Si desea establecer la anchura y luego sólo tiene que añadir ancho: 300

Nota: No utilice los qoutes simples o dobles, como el ancho: '300' o ancho: "300"