Как установить ширину текстовой области с помощью tinymce?

Question

Я попробовал несколько способов установить ширину текстовой области tinymce.

Моя 1-я попытка:

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>

, затем используйте этот tinyMCE.init в вашем 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",

});

Это работает для вас?

Answer 2

Вы можете использовать этот способ ..

 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 * 1006

Answer 3

Самое смешное, что ширина и высота задаются в свойстве стиля в iframe.

Что я делаю, чтобы установить мою ширину в соответствии с настройками init, это изменив свойство 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
}