bootstrap前台富文本框的书写。

首先砍一下效果图：

bootstrap前台富文本框的书写。

页面红色框处即为富文本框的一些格式化调整。

此处只贴富文本框处的代码：

<div class="form-group">
  <label class="col-sm-1 control-label" for="content">内容：</label>
  <div class="h-200" style="padding:0 30px;" >
  <textarea class="col-sm-5" id="content" name="content" style="height:210px;width:100%;"></textarea>
  </div>
</div>

$(function(){
   //创建富文本编辑器
   var editorBox = UE.getEditor('content', {
         toolbars : [
               [ 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'autotypeset','blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','insertimage', 'emotion', 'map', '|', 'selectall', 'cleardoc', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyjustify', '|', 'link', 'unlink', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', 'wordimage' ] ],
         wordCount : false,  
         elementPathEnabled : false
      });
}）

其中toolbars中写的属性都是对应word中的文本格式化样式。譬如：'undo', 'redo'分别代表的是撤销和回滚。

附带一些属性配置。

对编辑器默认参数配置：autoFloatEnabled:false

工具栏浮动：elementPathEnabled:false

左下角显示元素路径：autoHeightEnabled:false

是否自动长高,默认true，设为false当超界时显示滚动条,maximumWords:10000

允许的最大字符数：initialFrameWidth:750

初始化编辑器宽度,默认1000 ,initialFrameHeight:400

初始化编辑器高度,默认320 ,wordCount:true

是否开启字数统计 ,textarea:content

设置默认文本框内容的name属性，也可在对应的html中设置name属性

使用的js：

<!-- UEditor富文本编辑器 -->
<script src="${ctx}/js/ueditor1.4.3/ueditor.config.js"></script>
<script src="${ctx}/js/ueditor1.4.3/ueditor.all.js"> </script>

bootstrap前台富文本框的书写。

相关推荐