使用HTML5开发制作Bootstrap的网格式jQuery文本编辑器

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

　　使用方法

　　该文本编辑器依赖于jQuery，jQueryUI和Bootstrap，这些相关文本必须引入。如果你想集成使用tincyMCE，则需要引入tinymce.min.js和jquery.tinymce.min.js文件。

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

　　使用方法

　　该文本编辑器依赖于jQuery，jQueryUI和Bootstrap，这些相关文本必须引入。如果你想集成使用tincyMCE，则需要引入tinymce.min.js和jquery.tinymce.min.js文件。

　　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：设置在编辑器顶部&ldquo;new row&rdquo;按钮上显示的列布局。

　　row_classes：设置在设置按钮下一行可以设置的切换行的class名称。

　　col_classe：和row_classes属性相同，但是是设置列。

　　row_tools：在行工具栏上添加额外的按钮。

　　col_tools：和code>row_tools相同，但是是设置列。

　　HTML结构

　　按照Bootstrap的标准布局进行网格排版，你可以在网格中嵌套网格，下面是Demo中的网格布局。

　　初始化插件

　　在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该文本编辑器插件。

　　配置参数

　　new_row_layouts：设置在编辑器顶部&ldquo;new row&rdquo;按钮上显示的列布局。

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

     关注恒泰博远官方微信，即可免费体验微信定制功能，HTML5营销游戏和场景应用，以及免费的微信企业号功能使用     

       想免费体验微信企业号，无需注册微信企业号、无需安装APP、也可体验，关注恒泰博远官方微信后，点击-企业号-快速体验，输入相关信息，即可免费体验。      

      恒泰博远为助力企业发展，旗下微赢企业号平台，所有功能免费用。想要开通企业号功能使用，请拨打：010-82969001