Remove buttons from Editor Toolbar when showing on mobile

[Egbert]

Hi,

I'm using the Editor with a lot of options/buttons and that works fine on a 'large' screen.

On a mobile it will split over 4 lines.
(Hardly no room for editing text left)

Is it possible to reduce the number of options/buttons in the toolbar when showing it on a mobile phone?
(I only want to keep the Bold/Italic/Underline buttons)

Thanks....

[Mihaela]

Hi,

To reduce the number of the Editor's tools on mobile devices I would suggest the following approach:

• Detect the browser window size when the DOM is fully loaded:

<script>
    $(document).ready(function () {
        if (window.matchMedia("(max-width: 812px)").matches) { //if the viewport is less than 812 pixels wide
          ...
        }

        $(window).on('resize', function () { //handle the "resize" event of the browser window to maintain the tool options when resizing the window
            if (window.matchMedia("(max-width: 812px)").matches) {

            }
        });
    });
</script>

 

• Use the setOptions() method to change the Editor's configuration (the tools) after its initialization:

<script>
    $(document).ready(function () {
        var editor = $("#editor").data("kendoEditor"); //get an instance of the Editor control
        var initialTools = editor.options.tools; //store its initial tools options
        if (window.matchMedia("(max-width: 812px)").matches) {
            editor.setOptions({ tools: [{ name: "bold" }, { name: "italic" }, { name: "underline" }]}); //change the tools
        }

        $(window).on('resize', function () {
            if (window.matchMedia("(max-width: 812px)").matches) {
                editor.setOptions({ tools: [{ name: "bold" }, { name: "italic" }, { name: "underline" }] });
            } else {
                editor.setOptions({ tools: initialTools }); //load the initial tools when the viewport is > 812 pixels
            }
        });
    });
</script>

Here is a REPL example: https://netcorerepl.telerik.com/cmkmQTvG53BEAIql20

Would you please give this approach a try and let me know if it works out for you?

 

Regards, Mihaela Progress Telerik