DEV Community

fractalbit
fractalbit

Posted on

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',
    ],
Enter fullscreen mode Exit fullscreen mode

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,
  })
}
Enter fullscreen mode Exit fullscreen mode

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.

Latest comments (4)

Collapse
 
hyperstatics profile image
hyperstatics

When we use 2 tiny on the same page, it does not save the first one in the database.

Collapse
 
karansosa4 profile image
karan sosa

How can I remove html tags showing on the frontend blade by tinymce, and can paste just the content that I have inserted in my backend

Collapse
 
matejsvajger profile image
Matej Svajger

You can just add tiny options in the additional details column of Bread editor:

{
    "tinymceOptions": {
        "height": 200,
        "min_height": 200
    }
}
Collapse
 
fractalbit profile image
fractalbit

Thank you for your suggestion! This is easier and has the added benefit of changing the dimensions per field instead of globally. Please note though that this will not work if you already did what the article describes (you will have to first disable the additional js config).