Mobile View - Plugin for viewing the contents of the editor in a mobile view

It is often necessary to see how the page will look like in mobile view. You can use the mobile-view plugin for this. This plugin allows you to preview your content at different screen widths to simulate how it will appear on various mobile devices.

Installation

If you are using a fat build of the editor, then the plugin is already included in it. If you are using the slim build, then you need to enable it manually.

<!-- js -->
<script src="https://unpkg.com/browse/jodit-pro@1.3.28/build/plugins/mobile-view/mobile-view.js"></script>
<!-- css -->
<link rel='stylesheet' href="https://unpkg.com/browse/jodit-pro@1.3.28/build/plugins/mobile-view/mobile-view.css"></link>

<script>
Jodit.defaultOptions.extraPlugins.push('mobile-view');
Jodit.make('#editor');
</script>
Copy

Options

mobileView.mode

• Type: string | number
• Default: 'default'

The default mode for the mobile view. Can be 'default' for normal view or a number representing the width in pixels.

Jodit.make('#editor', {
    mobileView: {
        mode: 375 // Start with iPhone SE width
    }
});
Copy

controls.mobileView.list

• Type: object
• Default:

{
    default: 'Default',
    375: 'iPhone SE',
    414: 'iPhone XR',
    390: 'iPhone 12 Pro',
    393: 'Pixel 5',
    820: 'iPad Air'
}
Copy

Several resolutions are available by default. This option allows you to customize the list of available device resolutions in the dropdown menu.

In order to add your own resolutions, you need to add the following code in the config.js file:

Jodit.defaultOptions.controls.mobileView = {
    ...Jodit.defaultOptions.controls.mobileView,
    list: {
        ...Jodit.defaultOptions.controls.mobileView.list,
        320: 'iPhone 5',
        360: 'iPhone 6',
        768: 'iPad'
    }
};
Copy

Or right at the initialization of the editor:

Jodit.make('#editor', {
    controls: {
        mobileView: {
            list: {
                default: 'Default',
                320: 'iPhone 5',
                360: 'iPhone 6',
                768: 'iPad'
            }
        }
    }
});
Copy

Usage

The plugin adds a "Mobile View" button to the toolbar. When clicked, it opens a dropdown menu with available device resolutions. Selecting a resolution will adjust the editor's width to match that device.

Programmatic Control

You can also control the mobile view programmatically using the mobileView command:

const editor = Jodit.make('#editor');

// Switch to iPhone SE view
editor.execCommand('mobileView', false, 375);

// Switch back to default view
editor.execCommand('mobileView', false, 'default');
Copy

Examples

Basic Usage

const editor = Jodit.make('#editor', {
    buttons: ['mobileView'],
    extraPlugins: ['mobile-view']
});
Copy

Custom Device List

const editor = Jodit.make('#editor', {
    buttons: ['mobileView'],
    extraPlugins: ['mobile-view'],
    controls: {
        mobileView: {
            list: {
                default: 'Desktop',
                320: 'Small Phone',
                375: 'Medium Phone',
                414: 'Large Phone',
                768: 'Tablet',
                1024: 'Small Laptop'
            }
        }
    }
});
Copy

Starting with Mobile View

const editor = Jodit.make('#editor', {
    buttons: ['mobileView'],
    extraPlugins: ['mobile-view'],
    mobileView: {
        mode: 375 // Start with iPhone SE width
    }
});
Copy

API Reference

Configuration Interface

interface MobileViewConfig {
    mode: string | number;  // Default mode: 'default' or width in pixels
}
Copy

Control Configuration

The mobile view control configuration:

interface MobileViewControl extends IControlType {
    tooltip: string;                    // Tooltip text
    icon: string;                       // Icon SVG
    command: string;                    // Command name ('mobileView')
    isActive: (editor: IJodit) => boolean;      // Check if mobile view is active
    isChildActive: (editor: IJodit, button) => boolean;  // Check if specific resolution is active
    exec: (editor: IJodit) => void | false;     // Execute default action
    childExec: (editor: IJodit, node, options) => void | false;  // Execute child action
    list: {
        [key: string | number]: string;  // Device resolution list
    };
}
Copy

Default Device List

{
    default: 'Default',
    375: 'iPhone SE',
    414: 'iPhone XR',
    390: 'iPhone 12 Pro',
    393: 'Pixel 5',
    820: 'iPad Air'
}
Copy

How It Works

When you select a mobile view resolution:

1. The editor's workplace width is set to the selected width
2. The content is centered in the editor
3. This allows you to see how your content will look on a device with that screen width
4. Switching back to "Default" restores the normal editor width

This is particularly useful for responsive design testing, ensuring your content looks good on various devices without having to use browser developer tools or actual mobile devices.