基于Bootstrap的网格式jQuery文本编辑器

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相同，但是是设置列。