Forum Discussion

cpoh's avatar
cpoh
Adept
11 years ago

Changing the size of the tinyMCE rich text editor

What's the best way to change the size of the rich text editor on the reply or post page?

 

Changing the height of the textarea in the CSS didn't seem to work.

 

Doing it through the JS worked, but ideally I'd prefer to do it through the CSS.

 

tinymce.activeEditor.theme.resizeTo(x, y)

 

    • cpoh's avatar
      cpoh
      Adept
      11 years ago

      Thanks for that, you were right. After I read your comment I went back to check; I just got the selector wrong.

       

      It was:

      #lia-body .lia-content .message-body-editor textarea {
    height: 500px;
}

      Previously I'd just been using

      .message-body-editor textarea

       

      • cpoh's avatar
        cpoh
        Adept
        11 years ago

        Sorry for the double post but actually, that doesn't seem to have worked at all. I'm not sure what happened, but I thought it worked, but it didn't.

         

        The below html is what lithium spits out after tinymce is initialised. I think the reason it worked at the beginning, was it looked like it was using the textarea, while now the textarea is hidden and the iframe is being used instead(?)... I'm not quite sure why this might be.

         

        <div class="message-body-editor">
  <div class="lia-inline-ajax-feedback">
    <div class="AjaxFeedback" id="ajaxFeedback"></div>
  </div>
  <div id="mce_16" class="mce-tinymce ..." hidefocus="1" tabindex="-1" role="application" style="visibility: hidden;...">
    <div id="mce_16-body" class="mce-container-body ...">
      <div id="mce_17" class="mce-toolbar-grp ..." hidefocus="1" tabindex="-1" role="group">
      ...
      </div>
      <div id="mce_26" class="mce-edit-area ..." hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;">
        <iframe id="tinyMceEditor_ifr" src='x-javascript&colon;""' frameborder="0" allowtransparency="true" title="Rich Text Area..." style="width: 100%; height: 250px; display: block;"></iframe>
      </div>
      <div id="mce_27" class="mce-statusbar ..." hidefocus="1" tabindex="-1" role="group" style="...">
      ...
      </div>
    </div>
  </div>
  <textarea class="lia-form-tiny-mce-editor-input lia-message-editor" id="tinyMceEditor" name="tinyMceEditor" aria-hidden="true" style="display: none;"></textarea>
  <div class="lia-inline-ajax-feedback">
    <div class="AjaxFeedback" id="ajaxFeedback"></div>
  </div>
</div>