Overview

Grid Editor is a powerful visual JavaScript editor tailored for the Bootstrap 4 grid system, designed as a jQuery plugin. It offers an intuitive interface that allows users to effortlessly create, drag, resize, and delete rows and columns within their layouts while also providing options to set distinct column widths for various devices such as tablets and phones. Whether you're a web developer or a designer, Grid Editor simplifies the grid management process, making it easier to design responsive web pages.

With seamless integration for popular rich text editors like TinyMCE, Summernote, and CKEditor, Grid Editor not only focuses on layout structure but also enhances content editing. This makes it a comprehensive tool for anyone looking to manage both the aesthetic and functional aspects of their web projects.

Features

Visual Editing: Modify the Bootstrap 4 grid layout visually with drag-and-drop functionality, making it user-friendly and efficient.
Device-Specific Settings: Customize column widths distinctly for tablets and phones, ensuring optimal presentation across platforms.
Rich Text Editor Integration: Supports TinyMCE, Summernote, and CKEditor, allowing for enhanced content editing within the grid.
Custom Row and Column Options: Set CSS classes and additional tool buttons for row and column management via easily configurable options.
Dynamic Layout Options: Add customizable "new row" layouts that appear in the editor for greater flexibility in design.
Clean HTML Output: The getHtml method retrieves a clean HTML representation of the grid, streamlining integration with existing projects.
Custom Functionality: Includes a custom filter option to execute functions before initialization and after de-initialization, offering deeper control.
Compatibility with jQuery: Requires jQuery and related libraries, ensuring it integrates seamlessly into existing projects with standard dependencies.

Friendly Pixel

Grid Editor