{"id":14972455,"url":"https://github.com/friendly-pixel/grid-editor","last_synced_at":"2025-04-04T19:15:09.862Z","repository":{"id":25852797,"uuid":"29292511","full_name":"Friendly-Pixel/grid-editor","owner":"Friendly-Pixel","description":"Visual javascript editor for the bootstrap 4 grid system, written as a jQuery plugin.","archived":false,"fork":false,"pushed_at":"2024-06-07T13:49:44.000Z","size":249,"stargazers_count":369,"open_issues_count":9,"forks_count":128,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-04-04T19:15:02.903Z","etag":null,"topics":["bootstrap-grid","javascript","jquery"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Friendly-Pixel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-01-15T10:35:24.000Z","updated_at":"2025-01-04T00:53:38.000Z","dependencies_parsed_at":"2024-04-26T15:31:27.270Z","dependency_job_id":"e46132e0-cbe9-44ed-982f-e56257ccd6c2","html_url":"https://github.com/Friendly-Pixel/grid-editor","commit_stats":{"total_commits":112,"total_committers":13,"mean_commits":8.615384615384615,"dds":0.6517857142857143,"last_synced_commit":"a892726f449410e19ad5a84bab83981ab90ba39f"},"previous_names":["frontwise/grid-editor"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Friendly-Pixel%2Fgrid-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Friendly-Pixel%2Fgrid-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Friendly-Pixel%2Fgrid-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Friendly-Pixel%2Fgrid-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Friendly-Pixel","download_url":"https://codeload.github.com/Friendly-Pixel/grid-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234924,"owners_count":20905854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap-grid","javascript","jquery"],"created_at":"2024-09-24T13:46:56.831Z","updated_at":"2025-04-04T19:15:09.835Z","avatar_url":"https://github.com/Friendly-Pixel.png","language":"JavaScript","readme":"Grid Editor\n===========\n\nGrid Editor is a visual javascript editor for the [bootstrap 4 grid system](http://getbootstrap.com/css/#grid), written as a [jQuery](http://jquery.com/) plugin. You can create, drag, resize and delete rows and columns, and set different column widths for tablets and phones.\n\n(Looking for the __bootstrap 3 support__? Use version 0 in the [bootstrap_3 branch](https://github.com/Frontwise/grid-editor/tree/bootstrap_3))\n\nIt provides integration plugins for the following rich text editors to edit column content: TinyMCE, summernote and CKEditor.\n\n![Preview](http://i.imgur.com/UF9CCzk.png) \n\n# \u003ca href=\"http://transfer.frontwise.com/frontwise/grid-editor/example/\" target=\"_blank\"\u003eTry the demo!\u003c/a\u003e\n\nInstallation\n------------\n\n* __Dependencies:__ Grid Editor depends on jQuery, jQuery UI, Font Awesome 4 or 5, and Bootstap 4, so make sure you have included those in the page. \n    * If you want to use the tincyMCE integration, include tinyMCE and tinyMCE jQuery plugin as well.\n    * If you want to use the summernote integration, include summernote as well.\n    * If you want to use the CKEditor integration... you get the point.\n* [Download the latest version of Grid Editor](https://github.com/Frontwise/grid-editor/archive/master.zip) and include it in your page: \n\n```html\n\u003c!-- Make sure jQuery, jQuery UI, font awesome, and bootstrap 4 are included. TinyMCE is optional. --\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"grid-editor/dist/grideditor.css\" /\u003e\n\u003cscript src=\"grid-editor/dist/jquery.grideditor.min.js\"\u003e\u003c/script\u003e\n```\n\nUsage\n-----\n```javascript\n$('#myGrid').gridEditor({\n    new_row_layouts: [[12], [6,6], [9,3]],\n});\n// Call this to get the result after the user has done some editing:\nvar html = $('#myGrid').gridEditor('getHtml');\n```\n\nMethods\n-------\n\n__`getHtml`:__ Returns the clean html.\n\n```javascript\nvar html = $('#myGrid').gridEditor('getHtml');\n```\n\n__`remove`:__ Completely remove grideditor.\n\n```javascript\n$('#myGrid').gridEditor('remove');\n```\n    \nOptions\n-------\n\n### General options\n\n__`new_row_layouts`:__ Set the column layouts that appear in the \"new row\" buttons at the top of the editor.\n\n```javascript\n$('#myGrid').gridEditor({\n    new_row_layouts: [[12], [6,6], [9,3]],\n});\n```\n\n__`row_classes`:__ Set the css classes that the user can toggle on the rows, under the settings button.\n\n```javascript\n$('#myGrid').gridEditor({\n    row_classes: [{label: 'Example class', cssClass: 'example-class'}],\n});\n```\n\n__`col_classes`:__ The same as `row_classes`, but for columns.\n\n__`row_tools`:__ Add extra tool buttons to the row toolbar.\n\n```javascript\n$('#myGrid').gridEditor({\n    row_tools: [{\n        title: 'Set background image',\n        iconClass: 'glyphicon-picture',\n        on: { \n            click: function() {\n                $(this).closest('.row').css('background-image', 'url(http://placekitten.com/g/300/300)');\n            }\n        }\n    }]\n});\n```\n    \n__`col_tools`:__ The same as row_tools, but for columns.\n\n__`custom_filter`:__ Allows the execution of a custom function before initialization and after de-initialization. Accepts a functions or a function name as string.\nGives the `canvas` element and `isInit` (true/false) as parameter.\n\n```javascript\n$('#myGrid').gridEditor({\n    'custom_filter': 'functionname',\n});\n\nfunction functionname(canvas, isInit) {\n    if(isInit) {\n        // do magic on init\n    } else {\n        // do magic on de-init\n    }\n}\n```\n\nor\n\n```javascript\n$('#myGrid').gridEditor({\n    'custom_filter': function(canvas, isInit) {\n        //...\n    },\n});\n```\n\n__`valid_col_sizes`:__ Specify the column widths that can be selected using the +/- buttons\n\n```javascript\n$('#myGrid').gridEditor({\n    'valid_col_sizes': [2, 5, 8, 10],\n});\n```\n\n__`source_textarea`:__ Allows to set an already existing textarea as input for grid editor.\n\n```javascript\n$('#myGrid').gridEditor({\n    source_textarea: 'textarea.myTextarea',\n});\n```\n\nYou will have write back the content to the textarea before saving, for example in this way:\n\n```javascript\n$('form.myForm').on('submit', function() {\n    var html = $('#myGrid').gridEditor('getHtml');\n    $('textarea.myTextarea').val(html);\n});\n```\n\n### Rich text editor options\n\nGrid editor comes bundles with support for the following rich text editors (RTEs): \n* [TinyMCE](http://www.tinymce.com/) - [(example)](https://transfer.frontwise.com/frontwise/grid-editor/example/index.html)\n* [summernote](http://summernote.org/) - [(example)](https://transfer.frontwise.com/frontwise/grid-editor/example/summernote.html)\n* [CKEditor](http://ckeditor.com/) - [(example)](https://transfer.frontwise.com/frontwise/grid-editor/example/ckeditor.html)\n\n__`content_types`:__ Specify the RTE to use. Valid values: `['tinymce']`, `['summernote']`, `['ckeditor']`. Default value: `['tinymce']`.\n\n```javascript\n$('#myGrid').gridEditor({\n    content_types: ['summernote'],\n});\n```\n\n__`ckeditor.config`:__ Specify ckeditor config, when using the `ckeditor` `content_types`.\nSee the [CKEditor documentation](http://docs.ckeditor.com/). \nAlso check out the [ckeditor example](https://transfer.frontwise.com/frontwise/grid-editor/example/ckeditor.html).\n\n```javascript\n$('#myGrid').gridEditor({\n    ckeditor: {\n        config: { language: 'fr' }\n    }\n});\n```\n\n__`summernote.config`:__ Specify summernote config, when using the `summernote` `content_types`.\nSee the [summernote documentation](http://summernote.org/deep-dive/). \nAlso check out the [summernote example](https://transfer.frontwise.com/frontwise/grid-editor/example/summernote.html).\n\n```javascript\n$('#myGrid').gridEditor({\n    summernote: {\n        config: { shortcuts: false }\n    }\n});\n```\n\n__`tinymce.config`:__ Specify tinyMCE config, when using the `tinymce` `content_types`.\nSee the [tinyMCE documentation](http://www.tinymce.com/wiki.php/Configuration).\nAlso check out the [tinymce example](https://transfer.frontwise.com/frontwise/grid-editor/example/index.html).\n\n```javascript\n$('#myGrid').gridEditor({\n    tinymce: {\n        config: { paste_as_text: true }\n    }\n});\n```\n\n\nUpgrading\n---------\n\nSee UPGRADING.md for the changes you have to make when upgrading from grid-editor version 0 to 1.\n\nBuilding\n--------\n\nIf you want to make your own changes to the source, see [BUILDING.md](/BUILDING.md)\n\n\nContributing\n--------\nIf you want to help out, please first read [CONTRIBUTING.md](/CONTRIBUTING.md)\n\n\nAttribution\n-----------\n\nGrid Editor was heavily inspired by [Neokoenig's grid manager](https://github.com/neokoenig/jQuery-gridmanager)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendly-pixel%2Fgrid-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffriendly-pixel%2Fgrid-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendly-pixel%2Fgrid-editor/lists"}