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

当前位置:主页 > jQuery库 > 布局和界面 > 基于Bootstrap的网格式jQuery文本编辑器
基于Bootstrap的网格式jQuery文本编辑器
分享:

    插件介绍

    grid-editor是一款基于Bootstrap网格系统的网格式所见即所得的jQuery文本编辑器插件。它可以通过Bootstrap排版来生成各种复杂的网格布局,每个网格中可以生成一个编辑器。

    浏览器兼容性

    浏览器兼容性
    时间:2015-08-13
    阅读:
简要教程

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