Announcement

Collapse
No announcement yet.

How to change editor size

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to change editor size

    First, go to /js/ckeditor-rollup-500.js

    Find
    Code:
    CKEDITOR.config.height="100px";CKEDITOR.config.width="100%";
    Change height and/or width.

    Then to prevent reflow, go to
    Code:
    admincp > styles manager > edit templates > CSS Templates > css_global.css
    Find
    Code:
    .content-entry-box .ckeditor-bare-box.entry-field
    In that code block, you will find height defined already. Change the value to your desired number to set the height.

    If you want to change width, add
    Code:
    width: 400px;
    Make sure you set height/width in here a little more than you did in the js file. Needs to match up with exact padding values.

    Important

    If you change width, you must make this change also:
    After making the above width change, scroll below a bit and find:
    Code:
    .content-entry-box .cke_editor_ckeditor-bare,
    
    .content-entry-box .cke_editor_ckeditor-bare-video,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-link,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-video-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-link-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-gallery,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-gallery-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-poll,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-poll-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-mediavideo,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-mediagallery,
    
    
    .content-entry-box .cke_editor_ckeditor-bare-mediagallery-edit,
    
    
    .content-entry-box .cke_editor_ckeditor-advanced,
    
    
    #editSignatureDialog .cke_editor_ckeditor-signature {
    
    
    margin-bottom:20px;
    
    
    padding:0;
    
    
    width:99.9% !important;
    
    
    border: {vb:stylevar form_field_border};
    
    
    background: {vb:stylevar form_field_background};
    
    
    -moz-border-radius: 3px;
    
    
    -webkit-border-radius: 3px;
    
    
    border-radius: 3px;
    
    }
    Remove the width: 99.9% !important; line.


    Please let me know if this is not working or if you need to enhance it in some other way.
    Last edited by Riasat; Thu 28 Mar '13, 9:03am.

  • #2
    Thanks.. this works; however you have a type-o:

    Set height.
    Add


    Code:



    width: 400px;

    should be
    height: 400px;


    Comment


    • #3
      It wasn't a typo but I have edited it for clarity. Thanks for the feedback.

      Comment


      • #4
        I'm trying to do this but in vBulletin 5.5 it doesn't work. Some way to modify the height of the editor.
        The height that comes by default is ridiculous and since a mobile device cannot be modified, it is necessary to add more height, today almost everyone uses a mobile device to navigate the forums.
        Any solution to this problem?
        Thank you

        Comment


        • #5
          This isn't really applicable anymore. The editor should automatically grow as the user types. Plus it can be resized by dragging the handle at the middle bottom of the editor window. If the user manually resizes with the editor handle, this will be remembered and used the next time the editor is loaded.
          Click image for larger version  Name:	2019-12-01_14-51-59.png Views:	0 Size:	43.1 KB ID:	4428451


          There isn't really a way to edit it in on Mobile but it should take up a good portion of the screen and the menu bar only shows the most used controls by default to limit the space it needs.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API - Full / Mobile
          Vote for your favorite feature requests and the bugs you want to see fixed.

          Comment


          • #6
            Originally posted by Wayne Luke View Post
            There isn't really a way to edit it in on Mobile but it should take up a good portion of the screen and the menu bar only shows the most used controls by default to limit the space it needs.
            Thanks for reply Wayne Luk !!

            From a PC device it can be made large although I would prefer it to be larger by default or at least be able to change the size. But the problem is in mobile that is not large enough and from a mobile device it cannot be enlarged.
            It would be nice if there was a solution for this.
            A greeting!!


            Comment


            • #7
              Click image for larger version

Name:	20191202_161600694_iOS.png
Views:	64
Size:	935.3 KB
ID:	4428514

              Translations provided by Google.

              Wayne Luke
              The Rabid Badger - a vBulletin Cloud demonstration site.
              vBulletin 5 API - Full / Mobile
              Vote for your favorite feature requests and the bugs you want to see fixed.

              Comment

              Related Topics

              Collapse

              Working...
              X