DEV Community

loading...

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

fractalbit profile image fractalbit ・2 min read

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.

Discussion

pic
Editor guide
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 Author

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).

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