如何使用tinymce设置textarea的宽度?

时间:2010-11-10 10:41:47

标签: tinymce

我尝试了几种方法来设置tinymce textarea的宽度。

我的第一次尝试:

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

在第二次尝试中:

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

但是,我仍然无法按照我的要求获得宽度。

有什么想法吗?

3 个答案:

答案 0 :(得分:21)

我认为问题可能在于您的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",

});

这对你有用吗?

答案 1 :(得分:12)

你可以这样使用..

 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

注意:请勿使用宽度为“300”或宽度为“300”的单个或双重qoutes:“300”

答案 2 :(得分:1)

有趣的是宽度和高度在iframe的style属性中设置。

根据我的init设置设置宽度的方法是修改iframe的style属性:

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