用于bootstrap 4网格系统的可视化javascript编辑器，作为jQuery插件编写。
Posted
tags:
中文标题：用于bootstrap 4网格系统的可视化javascript编辑器，作为jQuery插件编写。 原文标题：Visual javascript editor for the bootstrap 4 grid system, written as a jQuery plugin. 项目评级：Star:367 Fork:126 下载地址：https://github.com/Friendly-Pixel/grid-editor 详情介绍网格编辑器
Grid Editor是一个用于bootstrap 4网格系统的可视化javascript编辑器，作为jQuery插件编写。您可以创建、拖动、调整大小和删除行和列，并为平板电脑和手机设置不同的列宽。
（寻找bootstrap3支持？在bootstrap_3分支中使用版本0）
它为以下富文本编辑器提供了集成插件来编辑列内容：TinyMCE、summernote和CKEditor。
试试这个演示！
安装
用法
方法
getHtml：返回干净的html。
remove：完全去除砂砾。
选项
常规选项
new_row_layouts：设置编辑器顶部“新行”按钮中显示的列布局。
row_classes：在设置按钮下，设置用户可以在行上切换的css类。
col_classes：与row_classes相同，但适用于立柱。
row_tools：在行工具栏中添加额外的工具按钮。
col_tools：与row_tools相同，但适用于列。
custom_filter：允许在初始化前和去初始化后执行自定义函数。接受函数或函数名称作为字符串。
给出canvas元素和isInit（真/假）作为参数。
valid_col_sizes：指定可以使用+/-按钮选择的列宽
source_textarea：允许设置一个已经存在的文本区域作为网格编辑器的输入。
在保存之前，您必须将内容写回文本区域，例如，以这种方式：
富文本编辑器选项
网格编辑器附带了对以下富文本编辑器（RTE）的支持：
content_types：指定要使用的RTE。有效值：['tinymce']、['summernote']、＜12.16＞。默认值：['tinymce']。
ckeditor.config：当使用ckeditorcontent_types时，指定ckeditor配置。
请参阅CKEditor文档。
还可以看看ckeditor的例子。
summernote.config：当使用summernotecontent_types时，指定summernote配置。
请参阅summernote文档。
还可以看看summernote的例子。
tinymce.config：当使用tinymcecontent_types时，指定tinyMCE配置。
请参阅tinyMCE文档。
还可以看看同义词的例子。
正在升级
有关从网格编辑器版本0升级到1时必须进行的更改，请参阅UPGRADING.md。
建筑物
如果您想对源代码进行自己的更改，请参阅BUILDING.md
贡献
如果你想帮忙，请先阅读贡献.md
归因
网格编辑器深受Neokoenig网格经理的启发
Bootstrap 4 - 结合网格系统的砌体布局（二、三、四和六列布局）[重复]
如何将 Angular Flex Layout 与 Bootstrap 4 网格系统进行比较？