如何使用tinymce設置textarea的寬度？

Question

我嘗試了幾種方法來設置tinymce textarea的寬度。

我的第一次嘗試：

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

在第2次嘗試：

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

但儘管如此，我不能夠得到寬度按我的要求。

有什麼想法嗎？

Answer 1

我認爲問題可能與您的TinyMCE的初始化函數的工具欄。

試試這個例子，讓我知道它是否適合你？

在你的HTML：

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

然後在您的JavaScript中使用此tinyMCE.init：

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", 

}); 

這是否對你的工作？

Answer 2

有趣的是width和heigth正在設置iframe的style屬性。

我做什麼，按照我的初始化設置來設置我的寬度是修改iframe的樣式屬性：

// 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

您可以使用此方法..

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, 

}); 

如果你想設置寬度，則只需添加寬度：300

注：請不要使用單或雙qoutes例如寬度：「300」或寬度：「300」