Skip to main content

ResizeEditorButton Plugin

The ResizeEditorButton plugin enhances the On-Codemerge editor by providing a feature to simulate different screen sizes. This is particularly useful for developers and designers who want to test how their content looks on various devices like phones, tablets, and desktops directly within the editor.

on-CodeMerge

A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product. This intuitive tool for developers of all skill levels.
Result:
Preview:

Key Features​

1. Responsive Design Testing​

  • Device Simulation: Allows users to simulate how content will look on different devices by resizing the editor to match popular screen resolutions.
  • Dropdown Menu: A dedicated dropdown menu is provided on the editor's toolbar, listing various device sizes for easy access.

2. Customizable Screen Sizes​

  • Predefined Sizes: Includes a range of predefined screen sizes for phones, tablets, and desktops.
  • Custom Size: Users can easily switch between different sizes to test the responsiveness of their content.

3. Real-time Preview​

  • Instant Resizing: The editor's size changes instantly upon selecting a different screen size from the dropdown, providing immediate feedback on how content behaves on different devices.
  • Active Size Highlighting: The currently active screen size is highlighted in the dropdown menu, making it easy to identify the current mode.

Integration​

To integrate the ResizeEditorButton plugin with the On-Codemerge editor, follow these steps:

  1. Import the ResizeEditorButton class from the plugin package.
  2. Initialize an instance of EditorCore.
  3. Register the ResizeEditorButton as a module using the registerModule method.

Here's an example of how to integrate the ResizeEditorButton plugin:

import EditorCore from 'on-codemerge';
import { ResizeEditorButton } from 'on-codemerge/resizeEditorButton';

document.addEventListener('DOMContentLoaded', () => {
  const appElement = document.getElementById('app');
  if (appElement) {
    const editor = new EditorCore(appElement);

    // Create and register the ResizeEditorButton module
    const resizeEditorButton = new ResizeEditorButton();
    editor.registerModule(resizeEditorButton);
  }
});

Usage​

The ResizeEditorButton plugin is a valuable tool for any web developer or designer using the On-Codemerge editor. By enabling quick and easy switching between various screen sizes, it enhances the ability to create responsive content that looks great on all devices.

Example Usage​

Utilize the ResizeEditorButton plugin to improve your workflow in creating responsive designs. With just a few clicks, you can preview how your content will appear on different devices, ensuring your designs are adaptable and user-friendly.