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前台富文本框的书写。相关推荐

基于bootstrap的富文本框——wangEditor【欢迎增加开发】
先来一张效果图: 01. 引言老早就開始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的样例.
基于bootstrap的富文本框——wangEditor【欢迎加入开发】
先来一张效果图: 01. 引言老早就开始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的例子.
富文本框让最大四百像素_富文本框的使用
富文本框的种类有很多,例如 CKEditor UEEditor TinyEditor KindEditor 文件夹说明 ├── asp asp示例 ├── asp.net asp.net示例 ├── ...
django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用...
一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts importr ...
php文本框长度限制,php截取富文本框中的固定长度的字符
ai,哎怎么赶脚自己写东西越来越小儿科了呢,现在连这个问题都找了好半天因为后台是的内容是富文本编辑器编辑的,前台我傻逼的直接截取了字符串,然后样式啥的都乱了,找了半天是因为富文本的问题其实解决办法 ...
富文本框TinyMCE4.8上传本地图片基本配置（前端篇）
最近使用了一下TinyMCE富文本框,感觉是非常不错的一款,配置简单,界面优美,完全免费...推荐大家使用. 官方文档也比较容易阅读,大家有兴趣的可以自己去看看https://www.tiny.clo ...
asp .net mvc实现富文本框
首先我使用的是summernote 具体库参考 Summernote 中文网 | Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstra ...
解决Vue用v-html、v-text渲染后台富文本框文本内容样式修改问题，用自定义css样式无法渲染出对应效果的问题
举例: 如果您要加载富文本框内容的DOM id是detail 那么就这么写scss样式 #detail {font-size: 14px;text-align: center;&>> ...
常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ；和CKEditor实例...
目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多年历史的富文本编辑器了,使用简单,而且一般的使用是免费的,但是不开源,上传图片上传附件等功能没有,扩展性差. CuteEdit ...

bootstrap前台富文本框的书写。

bootstrap前台富文本框的书写。相关推荐

最新文章

热门文章