Change the height of the rich textbox (tinymce) in laravel voyager

Sometimes, things that seem pretty simple at first glance can be very hard to accomplish. That's what happened when i decided that i didn't like the rich textbox's height in laravel Voyager. It took up almost the whole screen. I had to change it, it should be pretty easy i thought...

But 2-3 hours later, i was still searching the web for a solution and trying various things without much success.

I will not bother you with all the things that i tried, i don't really remember them anyway! This is just a quick tip, that hopefully will save you some searching and fiddling around. As you will see, it is very easy once you have figured it out.

Step 1. Open config/voyager.php, find 'additional_js', uncomment the 'js/custom.js' line as shown below, and save the file.

'additional_js' => [
        'js/custom.js',
    ],

Step 2. Create the custom.js file in the public/js folder and paste in the following code.

function tinymce_setup_callback(editor) {
  tinymce.init({
    menubar: false,
    selector: "textarea.richTextBox",
    skin_url:
      $('meta[name="assets-path"]').attr("content") + "?path=js/skins/voyager",
    min_height: 100,
    height: 200,
    resize: "vertical",
    plugins: "link, image, code, table, textcolor, lists",
    extended_valid_elements:
      "input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]",
    file_browser_callback: function (field_name, url, type, win) {
      if (type == "image") {
        $("#upload_file").trigger("click")
      }
    },
    toolbar:
      "styleselect bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | link image table | code",
    convert_urls: false,
    image_caption: true,
    image_title: true,
  })
}

Now change min_height and height values to suit your needs (values are in pixels). Save the file and move to step 3.

There is no step 3. Enjoy! :)

Of course, since you now have the whole tinymce initial config in your custom.js file, feel free to customize even more things about it. You may need to refer to the tinymce docs.