grid-editor是一款基于Bootstrap网格系统的网格式所见即所得的jQuery文本编辑器插件。它可以通过Bootstrap排版来生成各种复杂的网格布局，每个网格中可以生成一个编辑器。
使用方法
该文本编辑器依赖于jQuery，jQueryUI和Bootstrap，这些相关文本必须引入。如果你想集成使用tincyMCE，则需要引入tinymce.min.js和jquery.tinymce.min.js文件。
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" /><link rel="stylesheet" type="text/css" href="dist/grideditor.css" /> <script src="js/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script><script src="https://tinymce.cachefly.net/4.0/tinymce.min.js"></script><script src="https://tinymce.cachefly.net/4.0/jquery.tinymce.min.js"></script><script src="dist/jquery.grideditor.min.js"></script> |
HTML结构
按照Bootstrap的标准布局进行网格排版，你可以在网格中嵌套网格，下面是Demo中的网格布局。
<div class="container"> <div id="myGrid"> <div class="row"> <div class="col-md-12"> <h1>...</h1> <p>...</p> <p>...</p> </div> </div> <div class="row"> <div class="col-md-4"> <h2>...</h2> <p>...</p> </div> <div class="col-md-4"> <h2>...</h2> <p>...</p> </div> <div class="col-md-4"> <h2>...</h2> <p>...</p> </div> </div> <div class="row"> <div class="col-md-8"> <h2>....</h2> <p>...</p> <div class="row"> <div class="col-md-6"> <hr> <p>...</p> </div> <div class="col-md-6"> <hr> <p>...</p> </div> </div> </div> <div class="col-md-4"> <h2>...</h2> <p>...</p> </div> </div> </div> <!-- /#myGrid --></div> <!-- /.container --> |
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该文本编辑器插件。
$('#myGrid').gridEditor({ new_row_layouts: [[12], [6,6], [9,3]], content_types: ['tinymce'],}); |
配置参数
new_row_layouts：设置在编辑器顶部“new row”按钮上显示的列布局。$('#myGrid').gridEditor({new_row_layouts: [[12], [6,6], [9,3]],});row_classes：设置在设置按钮下一行可以设置的切换行的class名称。$('#myGrid').gridEditor({row_classes: [{'Example class', cssClass:'example-class'}],});col_classe：和row_classes属性相同，但是是设置列。row_tools：在行工具栏上添加额外的按钮。$('#myGrid').gridEditor({row_tools: [{title:'Set background image',iconClass:'glyphicon-picture',on: {click:function() {$(this).closest('.row').css('background-image','url(...)');}}}]});col_tools：和code>row_tools相同，但是是设置列。
