web-dev-qa-db-ja.com

tinymceを使用してtextareaの幅を設定するにはどうすればよいですか？

Tinymceテキストエリアの幅を設定するためにいくつかの方法を試しました。

私の最初の試み：

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>

しかし、それでも、要件どおりに幅を取得することはできません。

何かアイデアはありますか？

tinymce
14
Aryan G

TinyMCEinit関数のツールバーに問題があるのではないかと思います。

この例を試してみて、それがあなたのために働くかどうか私に知らせてください？

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

});

これはあなたのために働きますか？

21
Dai Bok

このように使用できます。

 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,

});

幅を設定したい場合は、width：300を追加するだけです。

注：width： '300'やwidth： "300"のようなシングルまたはダブルのqoutesは使用しないでください。

12
Pranay Gondane

面白いのは、幅と高さが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
}
1
Thariama